Kanban

Analytics

Chat

Files

Crypto

Banking

Todo

Orders

Recent

View All
Chat App
File Manager App
Email App
Kanban Board
Todo App
Crypto Dashboard
Banking Dashboard
Analytics Dashboard
Influencer Dashboard

25 May, 2022

Projects

Activity

## Banking cards

$2,139.22

**** **** **** 8945

$2,139.22

**** **** **** 8945

$2,139.22

**** **** **** 8945

## Pinned Apps

Kanban

Analytics

Chat

Files

Banking

11.3 hr

Working Hours

71%

13 /22

Completed tasks

49%

## Stock Market

## BTC

Bitcoin

60.33$

+3.3%

## SOL

Solana

20.56$

+4.11%

## Latest News

What is Tailwind CSS?

John D.

2 min read

Tailwind CSS Card Example

Travis F.

5 min read

10 Tips for Making a Good Camera Even Better

Alfredo E .

4 min read

## Settings

Dark Mode Monochrome Mode

35GB of 1TB

Upgrade

14

Pending

36

Completed

143

In Progress

279

Total

LMS App Design

Updated at 7 Sep

25%

jd

Store Dashboard

Updated at 11 Sep

49%

dv

Chat Mobile App

Updated at 19 Sep

13%

gt

NFT Marketplace App

Updated at 5 Sep

78%

jd

Today

6hr 22m

1. User Photo Changed

   12 minute ago

   John Doe changed his avatar photo

2. Images Added

   1 hour ago

   Mores Clarke added new image gallery

   Category: #Tag #Category

3. Design Completed

   3 hours ago

   Robert Nolan completed the design of the CRM application

   File_final.fig
   UI/UX CRM Dashboard

4. ER Diagram

   a day ago

   Team completed the ER diagram app

   Members:

   jd

5. Weekly Report

   a day ago

   The weekly report was uploaded

## Timeline

- Components
- Timeline

## Basic Timeline

Code

The timeline displays a list of events in chronological order. Check out code for detail of usage.

1. User Photo Changed

   12 minute ago

   John Doe changed his avatar photo

2. Video Added

   1 hour ago

   Mores Clarke added new video

3. Design Completed

   3 hours ago

   Robert Nolan completed the design of the CRM application

4. ER Diagram

   a day ago

   Team completed the ER diagram app

5. Weekly Report

   a day ago

   The weekly report was uploaded

      <ol class="timeline max-w-sm">
        <li class="timeline-item">
          <div
            class="timeline-item-point rounded-full bg-slate-300 dark:bg-navy-400"
          ></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                User Photo Changed
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >12 minute ago</span
              >
            </div>
            <p class="py-1">John Doe changed his avatar photo</p>
          </div>
        </li>
        <li class="timeline-item">
          <div
            class="timeline-item-point rounded-full bg-primary dark:bg-accent"
          ></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                Video Added
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >1 hour ago</span
              >
            </div>
            <p class="py-1">Mores Clarke added new video</p>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-item-point rounded-full bg-success"></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                Design Completed
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >3 hours ago</span
              >
            </div>
            <p class="py-1">
              Robert Nolan completed the design of the CRM application
            </p>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-item-point rounded-full bg-warning"></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                ER Diagram
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >a day ago</span
              >
            </div>
            <p class="py-1">Team completed the ER diagram app</p>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-item-point rounded-full bg-error"></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                Weekly Report
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >a day ago</span
              >
            </div>
            <p class="py-1">The weekly report was uploaded</p>
          </div>
        </li>
      </ol>

## With Linespace

Code

The timeline displays a list of events in chronological order. Check out code for detail of usage.

1. User Photo Changed

   12 minute ago

   John Doe changed his avatar photo

2. Video Added

   1 hour ago

   Mores Clarke added new video

3. Design Completed

   3 hours ago

   Robert Nolan completed the design of the CRM application

4. ER Diagram

   a day ago

   Team completed the ER diagram app

5. Weekly Report

   a day ago

   The weekly report was uploaded

      <ol class="timeline line-space max-w-sm">
        <li class="timeline-item">
          <div
            class="timeline-item-point rounded-full bg-slate-300 dark:bg-navy-400"
          ></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                User Photo Changed
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >12 minute ago</span
              >
            </div>
            <p class="py-1">John Doe changed his avatar photo</p>
          </div>
        </li>
        <li class="timeline-item">
          <div
            class="timeline-item-point rounded-full bg-primary dark:bg-accent"
          ></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                Video Added
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >1 hour ago</span
              >
            </div>
            <p class="py-1">Mores Clarke added new video</p>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-item-point rounded-full bg-success"></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                Design Completed
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >3 hours ago</span
              >
            </div>
            <p class="py-1">
              Robert Nolan completed the design of the CRM application
            </p>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-item-point rounded-full bg-warning"></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                ER Diagram
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >a day ago</span
              >
            </div>
            <p class="py-1">Team completed the ER diagram app</p>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-item-point rounded-full bg-error"></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                Weekly Report
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >a day ago</span
              >
            </div>
            <p class="py-1">The weekly report was uploaded</p>
          </div>
        </li>
      </ol>

## Outlined Point

Code

The timeline displays a list of events in chronological order. Check out code for detail of usage.

1. User Photo Changed

   12 minute ago

   John Doe changed his avatar photo

2. Video Added

   1 hour ago

   Mores Clarke added new video

3. Design Completed

   3 hours ago

   Robert Nolan completed the design of the CRM application

4. ER Diagram

   a day ago

   Team completed the ER diagram app

5. Weekly Report

   a day ago

   The weekly report was uploaded

      <ol class="timeline line-space max-w-sm">
        <li class="timeline-item">
          <div
            class="timeline-item-point rounded-full border-2 border-slate-300 dark:border-navy-400"
          ></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                User Photo Changed
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >12 minute ago</span
              >
            </div>
            <p class="py-1">John Doe changed his avatar photo</p>
          </div>
        </li>
        <li class="timeline-item">
          <div
            class="timeline-item-point rounded-full border-2 border-primary dark:border-accent"
          ></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                Video Added
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >1 hour ago</span
              >
            </div>
            <p class="py-1">Mores Clarke added new video</p>
          </div>
        </li>
        <li class="timeline-item">
          <div
            class="timeline-item-point rounded-full border-2 border-success"
          ></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                Design Completed
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >3 hours ago</span
              >
            </div>
            <p class="py-1">
              Robert Nolan completed the design of the CRM application
            </p>
          </div>
        </li>
        <li class="timeline-item">
          <div
            class="timeline-item-point rounded-full border-2 border-warning"
          ></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                ER Diagram
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >a day ago</span
              >
            </div>
            <p class="py-1">Team completed the ER diagram app</p>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-item-point rounded-full border-2 border-error"></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                Weekly Report
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >a day ago</span
              >
            </div>
            <p class="py-1">The weekly report was uploaded</p>
          </div>
        </li>
      </ol>

## Timeline With Ping

Code

The timeline displays a list of events in chronological order. Check out code for detail of usage.

1. User Photo Changed

   12 minute ago

   John Doe changed his avatar photo

2. Video Added

   1 hour ago

   Mores Clarke added new video

3. Design Completed

   3 hours ago

   Robert Nolan completed the design of the CRM application

4. ER Diagram

   a day ago

   Team completed the ER diagram app

5. Weekly Report

   a day ago

   The weekly report was uploaded

      <ol class="timeline max-w-sm">
        <li class="timeline-item">
          <div
            class="timeline-item-point rounded-full bg-slate-300 dark:bg-navy-400"
          ></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                User Photo Changed
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >12 minute ago</span
              >
            </div>
            <p class="py-1">John Doe changed his avatar photo</p>
          </div>
        </li>
        <li class="timeline-item">
          <div
            class="timeline-item-point rounded-full bg-primary dark:bg-accent"
          ></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                Video Added
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >1 hour ago</span
              >
            </div>
            <p class="py-1">Mores Clarke added new video</p>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-item-point rounded-full bg-success">
            <span
              class="inline-flex h-full w-full animate-ping rounded-full bg-success opacity-80"
            ></span>
          </div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                Design Completed
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >3 hours ago</span
              >
            </div>
            <p class="py-1">
              Robert Nolan completed the design of the CRM application
            </p>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-item-point rounded-full bg-warning"></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                ER Diagram
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >a day ago</span
              >
            </div>
            <p class="py-1">Team completed the ER diagram app</p>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-item-point rounded-full bg-error"></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                Weekly Report
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >a day ago</span
              >
            </div>
            <p class="py-1">The weekly report was uploaded</p>
          </div>
        </li>
      </ol>

## Ping & Linespace

Code

The timeline displays a list of events in chronological order. Check out code for detail of usage.

1. User Photo Changed

   12 minute ago

   John Doe changed his avatar photo

2. Video Added

   1 hour ago

   Mores Clarke added new video

3. Design Completed

   3 hours ago

   Robert Nolan completed the design of the CRM application

4. ER Diagram

   a day ago

   Team completed the ER diagram app

5. Weekly Report

   a day ago

   The weekly report was uploaded

      <ol class="timeline line-space max-w-sm">
        <li class="timeline-item">
          <div
            class="timeline-item-point rounded-full bg-slate-300 dark:bg-navy-400"
          ></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                User Photo Changed
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >12 minute ago</span
              >
            </div>
            <p class="py-1">John Doe changed his avatar photo</p>
          </div>
        </li>
        <li class="timeline-item">
          <div
            class="timeline-item-point rounded-full bg-primary dark:bg-accent"
          ></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                Video Added
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >1 hour ago</span
              >
            </div>
            <p class="py-1">Mores Clarke added new video</p>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-item-point rounded-full bg-success">
            <span
              class="inline-flex h-full w-full animate-ping rounded-full bg-success opacity-80"
            ></span>
          </div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                Design Completed
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >3 hours ago</span
              >
            </div>
            <p class="py-1">
              Robert Nolan completed the design of the CRM application
            </p>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-item-point rounded-full bg-warning"></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                ER Diagram
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >a day ago</span
              >
            </div>
            <p class="py-1">Team completed the ER diagram app</p>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-item-point rounded-full bg-error"></div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                Weekly Report
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >a day ago</span
              >
            </div>
            <p class="py-1">The weekly report was uploaded</p>
          </div>
        </li>
      </ol>

## Advanced Timeline

Code

The timeline displays a list of events in chronological order. Check out code for detail of usage.

1. User Photo Changed

   12 minute ago

   John Doe changed his avatar photo

2. Images Added

   1 hour ago

   Mores Clarke added new image gallery

   Category: #Tag #Category

3. Design Completed

   3 hours ago

   Robert Nolan completed the design of the CRM application

   File_final.fig
   UI/UX CRM Dashboard

4. ER Diagram

   a day ago

   Team completed the ER diagram app

   Members:

   jd

5. Weekly Report

   a day ago

   The weekly report was uploaded

      <ol class="timeline max-w-sm [--size:1.5rem]">
        <li class="timeline-item">
          <div
            class="timeline-item-point rounded-full border border-current bg-white text-secondary dark:bg-navy-700 dark:text-secondary-light"
          >
            <i class="fa fa-user-edit text-tiny"></i>
          </div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                User Photo Changed
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >12 minute ago</span
              >
            </div>
            <p class="py-1">John Doe changed his avatar photo</p>
            <div class="avatar mt-2 size-20">
              <img
                class="mask is-squircle"
                src="images/200x200.png"
                alt="avatar"
              />
            </div>
          </div>
        </li>
        <li class="timeline-item">
          <div
            class="timeline-item-point rounded-full border border-current bg-white text-primary dark:bg-navy-700 dark:text-accent"
          >
            <i class="fa-solid fa-image text-tiny"></i>
          </div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                Images Added
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >1 hour ago</span
              >
            </div>
            <p class="py-1">Mores Clarke added new image gallery</p>
            <div class="mt-4 grid grid-cols-3 gap-3">
              <img
                class="rounded-lg"
                src="images/800x600.png"
                alt="image"
              />
              <img
                class="rounded-lg"
                src="images/800x600.png"
                alt="image"
              />
              <img
                class="rounded-lg"
                src="images/800x600.png"
                alt="image"
              />
              <img
                class="rounded-lg"
                src="images/800x600.png"
                alt="image"
              />
              <img
                class="rounded-lg"
                src="images/800x600.png"
                alt="image"
              />
              <img
                class="rounded-lg"
                src="images/800x600.png"
                alt="image"
              />
            </div>
            <div class="mt-4">
              <span class="font-medium text-slate-600 dark:text-navy-100">
                Category:
              </span>

              <a
                href="#"
                class="text-xs text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
              >
                #Tag
              </a>

              <a
                href="#"
                class="text-xs text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
              >
                #Category
              </a>
            </div>
          </div>
        </li>
        <li class="timeline-item">
          <div
            class="timeline-item-point rounded-full border border-current bg-white text-success dark:bg-navy-700"
          >
            <i class="fa fa-leaf text-tiny"></i>
          </div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                Design Completed
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >3 hours ago</span
              >
            </div>
            <p class="py-1">
              Robert Nolan completed the design of the CRM application
            </p>
            <a
              href="#"
              class="inline-flex items-center space-x-1 pt-2 text-slate-600 transition-colors hover:text-primary dark:text-navy-100 dark:hover:text-accent"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="1.5"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                />
              </svg>
              <span>File_final.fig</span>
            </a>
            <div class="pt-2">
              <a
                href="#"
                class="tag rounded-full border border-secondary/30 bg-secondary/10 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:border-secondary-light/30 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25"
              >
                UI/UX
              </a>

              <a
                href="#"
                class="tag rounded-full border border-info/30 bg-info/10 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
              >
                CRM
              </a>

              <a
                href="#"
                class="tag rounded-full border border-success/30 bg-success/10 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
              >
                Dashboard
              </a>
            </div>
          </div>
        </li>
        <li class="timeline-item">
          <div
            class="timeline-item-point rounded-full border border-current bg-white text-warning dark:bg-navy-700"
          >
            <i class="fa fa-project-diagram text-tiny"></i>
          </div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                ER Diagram
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >a day ago</span
              >
            </div>
            <p class="py-1">Team completed the ER diagram app</p>
            <div>
              <p class="text-xs text-slate-400 dark:text-navy-300">Members:</p>
              <div class="mt-2 flex justify-between">
                <div class="flex flex-wrap -space-x-2">
                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <div
                      class="is-initial rounded-full bg-info text-xs-plus uppercase text-white ring-2 ring-white dark:ring-navy-700"
                    >
                      jd
                    </div>
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>
                </div>
                <button
                  class="btn size-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="size-5 rotate-45"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M7 11l5-5m0 0l5 5m-5-5v12"
                    ></path>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </li>
        <li class="timeline-item">
          <div
            class="timeline-item-point rounded-full border border-current bg-white text-error dark:bg-navy-700"
          >
            <i class="fa fa-history text-tiny"></i>
          </div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                Weekly Report
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >a day ago</span
              >
            </div>
            <p class="py-1">The weekly report was uploaded</p>
          </div>
        </li>
      </ol>

## Advanced Timeline

Code

The timeline displays a list of events in chronological order. Check out code for detail of usage.

1. User Photo Changed

   12 minute ago

   John Doe changed his avatar photo

2. Images Added

   1 hour ago

   Mores Clarke added new image gallery

   Category: #Tag #Category

3. Design Completed

   3 hours ago

   Robert Nolan completed the design of the CRM application

   File_final.fig
   UI/UX CRM Dashboard

4. ER Diagram

   a day ago

   Team completed the ER diagram app

   Members:

   jd

5. Weekly Report

   a day ago

   The weekly report was uploaded

      <ol class="timeline line-space max-w-sm [--size:1.5rem]">
        <li class="timeline-item">
          <div
            class="timeline-item-point rounded-full border border-current bg-white text-secondary dark:bg-navy-700 dark:text-secondary-light"
          >
            <i class="fa fa-user-edit text-tiny"></i>
          </div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                User Photo Changed
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >12 minute ago</span
              >
            </div>
            <p class="py-1">John Doe changed his avatar photo</p>
            <div class="avatar mt-2 size-20">
              <img
                class="mask is-squircle"
                src="images/200x200.png"
                alt="avatar"
              />
            </div>
          </div>
        </li>
        <li class="timeline-item">
          <div
            class="timeline-item-point rounded-full border border-current bg-white text-primary dark:bg-navy-700 dark:text-accent"
          >
            <i class="fa-solid fa-image text-tiny"></i>
          </div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                Images Added
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >1 hour ago</span
              >
            </div>
            <p class="py-1">Mores Clarke added new image gallery</p>
            <div class="mt-4 grid grid-cols-3 gap-3">
              <img
                class="rounded-lg"
                src="images/800x600.png"
                alt="image"
              />
              <img
                class="rounded-lg"
                src="images/800x600.png"
                alt="image"
              />
              <img
                class="rounded-lg"
                src="images/800x600.png"
                alt="image"
              />
              <img
                class="rounded-lg"
                src="images/800x600.png"
                alt="image"
              />
              <img
                class="rounded-lg"
                src="images/800x600.png"
                alt="image"
              />
              <img
                class="rounded-lg"
                src="images/800x600.png"
                alt="image"
              />
            </div>
            <div class="mt-4">
              <span class="font-medium text-slate-600 dark:text-navy-100">
                Category:
              </span>

              <a
                href="#"
                class="text-xs text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
              >
                #Tag
              </a>

              <a
                href="#"
                class="text-xs text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
              >
                #Category
              </a>
            </div>
          </div>
        </li>
        <li class="timeline-item">
          <div
            class="timeline-item-point rounded-full border border-current bg-white text-success dark:bg-navy-700"
          >
            <i class="fa fa-leaf text-tiny"></i>
          </div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                Design Completed
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >3 hours ago</span
              >
            </div>
            <p class="py-1">
              Robert Nolan completed the design of the CRM application
            </p>
            <a
              href="#"
              class="inline-flex items-center space-x-1 pt-2 text-slate-600 transition-colors hover:text-primary dark:text-navy-100 dark:hover:text-accent"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="1.5"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                />
              </svg>
              <span>File_final.fig</span>
            </a>
            <div class="pt-2">
              <a
                href="#"
                class="tag rounded-full border border-secondary/30 bg-secondary/10 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:border-secondary-light/30 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25"
              >
                UI/UX
              </a>

              <a
                href="#"
                class="tag rounded-full border border-info/30 bg-info/10 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
              >
                CRM
              </a>

              <a
                href="#"
                class="tag rounded-full border border-success/30 bg-success/10 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
              >
                Dashboard
              </a>
            </div>
          </div>
        </li>
        <li class="timeline-item">
          <div
            class="timeline-item-point rounded-full border border-current bg-white text-warning dark:bg-navy-700"
          >
            <i class="fa fa-project-diagram text-tiny"></i>
          </div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                ER Diagram
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >a day ago</span
              >
            </div>
            <p class="py-1">Team completed the ER diagram app</p>
            <div>
              <p class="text-xs text-slate-400 dark:text-navy-300">Members:</p>
              <div class="mt-2 flex justify-between">
                <div class="flex flex-wrap -space-x-2">
                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <div
                      class="is-initial rounded-full bg-info text-xs-plus uppercase text-white ring-2 ring-white dark:ring-navy-700"
                    >
                      jd
                    </div>
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>

                  <div class="avatar size-7 hover:z-10">
                    <img
                      class="rounded-full ring-2 ring-white dark:ring-navy-700"
                      src="images/200x200.png"
                      alt="avatar"
                    />
                  </div>
                </div>
                <button
                  class="btn size-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="size-5 rotate-45"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M7 11l5-5m0 0l5 5m-5-5v12"
                    ></path>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </li>
        <li class="timeline-item">
          <div
            class="timeline-item-point rounded-full border border-current bg-white text-error dark:bg-navy-700"
          >
            <i class="fa fa-history text-tiny"></i>
          </div>
          <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
              <p
                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0"
              >
                Weekly Report
              </p>
              <span class="text-xs text-slate-400 dark:text-navy-300"
                >a day ago</span
              >
            </div>
            <p class="py-1">The weekly report was uploaded</p>
          </div>
        </li>
      </ol>