Components

Tailwind css Timeline

The Timeline Component is designed to display events in chronological order, ideal for showcasing history, project milestones, or event sequences.

Basic usage

Copied!

1 Aug, 2023

Created "Preline in React" task

Find more detailed insctructions here.

Release v5.2.0 quick bug fix 🐞

Marked "Install Charts" completed

Finally! You can check it out here.

31 Jul, 2023

Take a break ⛳️

Just chill for now... 😉 

        
<!-- Timeline -->
<div>
  <!-- Heading -->
  <div class="ps-2 my-2 first:mt-0">
    <h3 class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
      1 Aug, 2023
    </h3>
  </div>
  <!-- End Heading -->

  <!-- Item -->
  <div class="flex gap-x-3">
    <!-- Icon -->
    <div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-gray-700">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <div class="size-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
      </div>
    </div>
    <!-- End Icon -->

    <!-- Right Content -->
    <div class="grow pt-0.5 pb-8">
      <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
        <svg class="flex-shrink-0 size-4 mt-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
          <polyline points="14 2 14 8 20 8"></polyline>
          <line x1="16" x2="8" y1="13" y2="13"></line>
          <line x1="16" x2="8" y1="17" y2="17"></line>
          <line x1="10" x2="8" y1="9" y2="9"></line>
        </svg>
        Created "Preline in React" task
      </h3>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
        Find more detailed insctructions here.
      </p>
      <button type="button" class="mt-1 -ms-1 p-1 inline-flex items-center gap-x-2 text-xs rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-700">
        <img class="flex-shrink-0 size-4 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Image Description">
        James Collins
      </button>
    </div>
    <!-- End Right Content -->
  </div>
  <!-- End Item -->

  <!-- Item -->
  <div class="flex gap-x-3">
    <!-- Icon -->
    <div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-gray-700">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <div class="size-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
      </div>
    </div>
    <!-- End Icon -->

    <!-- Right Content -->
    <div class="grow pt-0.5 pb-8">
      <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
        Release v5.2.0 quick bug fix 🐞
      </h3>
      <button type="button" class="mt-1 -ms-1 p-1 inline-flex items-center gap-x-2 text-xs rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-700">
        <span class="flex flex-shrink-0 justify-center items-center size-4 bg-white border border-gray-200 text-[10px] font-semibold uppercase text-gray-600 rounded-full dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
          A
        </span>
        Alex Gregarov
      </button>
    </div>
    <!-- End Right Content -->
  </div>
  <!-- End Item -->

  <!-- Item -->
  <div class="flex gap-x-3">
    <!-- Icon -->
    <div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-gray-700">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <div class="size-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
      </div>
    </div>
    <!-- End Icon -->

    <!-- Right Content -->
    <div class="grow pt-0.5 pb-8">
      <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
        Marked "Install Charts" completed
      </h3>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
        Finally! You can check it out here.
      </p>
      <button type="button" class="mt-1 -ms-1 p-1 inline-flex items-center gap-x-2 text-xs rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-700">
        <img class="flex-shrink-0 size-4 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Image Description">
        James Collins
      </button>
    </div>
    <!-- End Right Content -->
  </div>
  <!-- End Item -->

  <!-- Heading -->
  <div class="ps-2 my-2 first:mt-0">
    <h3 class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
      31 Jul, 2023
    </h3>
  </div>
  <!-- End Heading -->

  <!-- Item -->
  <div class="flex gap-x-3">
    <!-- Icon -->
    <div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-gray-700">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <div class="size-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
      </div>
    </div>
    <!-- End Icon -->

    <!-- Right Content -->
    <div class="grow pt-0.5 pb-8">
      <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
        Take a break ⛳️
      </h3>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
        Just chill for now... 😉
      </p>
    </div>
    <!-- End Right Content -->
  </div>
  <!-- End Item -->
</div>
<!-- End Timeline -->

Collapsable

Copied!

1 Aug, 2023

Created "Preline in React" task

Find more detailed insctructions here.

Release v5.2.0 quick bug fix 🐞

Marked "Install Charts" completed

Finally! You can check it out here.

31 Jul, 2023

Take a break ⛳️

Just chill for now... 😉 

        
<!-- Timeline -->
<div>
  <!-- Heading -->
  <div class="ps-2 my-2 first:mt-0">
    <h3 class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
      1 Aug, 2023
    </h3>
  </div>
  <!-- End Heading -->

  <!-- Item -->
  <div class="flex gap-x-3">
    <!-- Icon -->
    <div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-gray-700">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <div class="size-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
      </div>
    </div>
    <!-- End Icon -->

    <!-- Right Content -->
    <div class="grow pt-0.5 pb-8">
      <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
        <svg class="flex-shrink-0 size-4 mt-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
          <polyline points="14 2 14 8 20 8"></polyline>
          <line x1="16" x2="8" y1="13" y2="13"></line>
          <line x1="16" x2="8" y1="17" y2="17"></line>
          <line x1="10" x2="8" y1="9" y2="9"></line>
        </svg>
        Created "Preline in React" task
      </h3>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
        Find more detailed insctructions here.
      </p>
      <button type="button" class="mt-1 -ms-1 p-1 inline-flex items-center gap-x-2 text-xs rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-700">
        <img class="flex-shrink-0 size-4 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Image Description">
        James Collins
      </button>
    </div>
    <!-- End Right Content -->
  </div>
  <!-- End Item -->

  <!-- Item -->
  <div class="flex gap-x-3">
    <!-- Icon -->
    <div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-gray-700">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <div class="size-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
      </div>
    </div>
    <!-- End Icon -->

    <!-- Right Content -->
    <div class="grow pt-0.5 pb-8">
      <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
        Release v5.2.0 quick bug fix 🐞
      </h3>
      <button type="button" class="mt-1 -ms-1 p-1 inline-flex items-center gap-x-2 text-xs rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-700">
        <span class="flex flex-shrink-0 justify-center items-center size-4 bg-white border border-gray-200 text-[10px] font-semibold uppercase text-gray-600 rounded-full dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
          A
        </span>
        Alex Gregarov
      </button>
    </div>
    <!-- End Right Content -->
  </div>
  <!-- End Item -->

  <!-- Item -->
  <div class="flex gap-x-3">
    <!-- Icon -->
    <div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-gray-700">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <div class="size-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
      </div>
    </div>
    <!-- End Icon -->

    <!-- Right Content -->
    <div class="grow pt-0.5 pb-8">
      <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
        Marked "Install Charts" completed
      </h3>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
        Finally! You can check it out here.
      </p>
      <button type="button" class="mt-1 -ms-1 p-1 inline-flex items-center gap-x-2 text-xs rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-700">
        <img class="flex-shrink-0 size-4 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Image Description">
        James Collins
      </button>
    </div>
    <!-- End Right Content -->
  </div>
  <!-- End Item -->

  <!-- Heading -->
  <div class="ps-2 my-2 first:mt-0">
    <h3 class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
      31 Jul, 2023
    </h3>
  </div>
  <!-- End Heading -->

  <!-- Item -->
  <div class="flex gap-x-3">
    <!-- Icon -->
    <div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-gray-700">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <div class="size-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
      </div>
    </div>
    <!-- End Icon -->

    <!-- Right Content -->
    <div class="grow pt-0.5 pb-8">
      <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
        Take a break ⛳️
      </h3>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
        Just chill for now... 😉
      </p>
    </div>
    <!-- End Right Content -->
  </div>
  <!-- End Item -->

  <!-- Collapse -->
  <div id="hs-timeline-collapse" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-timeline-collapse-content">
    <!-- Heading -->
    <div class="ps-2 my-2">
      <h3 class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
        30 Jul, 2023
      </h3>
    </div>
    <!-- End Heading -->

    <!-- Item -->
    <div class="flex gap-x-3">
      <!-- Icon -->
      <div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-gray-700">
        <div class="relative z-10 size-7 flex justify-center items-center">
          <div class="size-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
        </div>
      </div>
      <!-- End Icon -->

      <!-- Right Content -->
      <div class="grow pt-0.5 pb-8">
        <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
          Final touch ups
        </h3>
        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
          Double check everything and make sure we're ready to go.
        </p>
      </div>
      <!-- End Right Content -->
    </div>
    <!-- End Item -->
  </div>
  <!-- End Collapse -->

  <!-- Item -->
  <div class="ps-[7px] flex gap-x-3">
    <button type="button" class="hs-collapse-toggle hs-collapse-open:hidden text-start inline-flex items-center gap-x-1 text-sm text-blue-600 font-medium decoration-2 hover:underline dark:text-blue-500" id="hs-timeline-collapse-content" data-hs-collapse="#hs-timeline-collapse">
      <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="m6 9 6 6 6-6"></path>
      </svg>
      Show older
    </button>
  </div>
  <!-- End Item -->
</div>
<!-- End Timeline -->

Hoverable rows

Copied!

1 Aug, 2023

Created "Preline in React" task

Find more detailed insctructions here.

Release v5.2.0 quick bug fix 🐞

Marked "Install Charts" completed

Finally! You can check it out here.

31 Jul, 2023

Take a break ⛳️

Just chill for now... 😉 

        
<!-- Timeline -->
<div>
  <!-- Heading -->
  <div class="ps-2 my-2 first:mt-0">
    <h3 class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
      1 Aug, 2023
    </h3>
  </div>
  <!-- End Heading -->

  <!-- Item -->
  <div class="flex gap-x-3 relative group rounded-lg hover:bg-gray-100 dark:hover:bg-white/10">
    <a class="absolute inset-0 z-[1]" href="#"></a>

    <!-- Icon -->
    <div class="relative last:after:hidden after:absolute after:top-0 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-gray-700 dark:group-hover:after:bg-gray-600">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <div class="size-2 rounded-full bg-white border-2 border-gray-300 group-hover:border-gray-600 dark:bg-gray-800 dark:border-gray-600"></div>
      </div>
    </div>
    <!-- End Icon -->

    <!-- Right Content -->
    <div class="grow p-2 pb-8">
      <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
        <svg class="flex-shrink-0 size-4 mt-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
          <polyline points="14 2 14 8 20 8"></polyline>
          <line x1="16" x2="8" y1="13" y2="13"></line>
          <line x1="16" x2="8" y1="17" y2="17"></line>
          <line x1="10" x2="8" y1="9" y2="9"></line>
        </svg>
        Created "Preline in React" task
      </h3>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
        Find more detailed insctructions here.
      </p>
      <button type="button" class="mt-1 -ms-1 p-1 relative z-10 inline-flex items-center gap-x-2 text-xs rounded-lg border border-transparent text-gray-500 hover:bg-white hover:shadow-sm disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-800">
        <img class="flex-shrink-0 size-4 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Image Description">
        James Collins
      </button>
    </div>
    <!-- End Right Content -->
  </div>
  <!-- End Item -->

  <!-- Item -->
  <div class="flex gap-x-3 relative group rounded-lg hover:bg-gray-100 dark:hover:bg-white/10">
    <a class="absolute inset-0 z-[1]" href="#"></a>

    <!-- Icon -->
    <div class="relative last:after:hidden after:absolute after:top-0 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-gray-700 dark:group-hover:after:bg-gray-600">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <div class="size-2 rounded-full bg-white border-2 border-gray-300 group-hover:border-gray-600 dark:bg-gray-800 dark:border-gray-600"></div>
      </div>
    </div>
    <!-- End Icon -->

    <!-- Right Content -->
    <div class="grow p-2 pb-8">
      <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
        Release v5.2.0 quick bug fix 🐞
      </h3>
      <button type="button" class="mt-1 -ms-1 p-1 relative z-10 inline-flex items-center gap-x-2 text-xs rounded-lg border border-transparent text-gray-500 hover:bg-white hover:shadow-sm disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-800">
        <span class="flex flex-shrink-0 justify-center items-center size-4 bg-white border border-gray-200 text-[10px] font-semibold uppercase text-gray-600 rounded-full dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
          A
        </span>
        Alex Gregarov
      </button>
    </div>
    <!-- End Right Content -->
  </div>
  <!-- End Item -->

  <!-- Item -->
  <div class="flex gap-x-3 relative group rounded-lg hover:bg-gray-100 dark:hover:bg-white/10">
    <a class="absolute inset-0 z-[1]" href="#"></a>

    <!-- Icon -->
    <div class="relative last:after:hidden after:absolute after:top-0 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-gray-700 dark:group-hover:after:bg-gray-600">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <div class="size-2 rounded-full bg-white border-2 border-gray-300 group-hover:border-gray-600 dark:bg-gray-800 dark:border-gray-600"></div>
      </div>
    </div>
    <!-- End Icon -->

    <!-- Right Content -->
    <div class="grow p-2 pb-8">
      <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
        Marked "Install Charts" completed
      </h3>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
        Finally! You can check it out here.
      </p>
      <button type="button" class="mt-1 -ms-1 p-1 relative z-10 inline-flex items-center gap-x-2 text-xs rounded-lg border border-transparent text-gray-500 hover:bg-white hover:shadow-sm disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-800">
        <img class="flex-shrink-0 size-4 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Image Description">
        James Collins
      </button>
    </div>
    <!-- End Right Content -->
  </div>
  <!-- End Item -->

  <!-- Heading -->
  <div class="ps-2 my-2 first:mt-0">
    <h3 class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
      31 Jul, 2023
    </h3>
  </div>
  <!-- End Heading -->

  <!-- Item -->
  <div class="flex gap-x-3 relative group rounded-lg hover:bg-gray-100 dark:hover:bg-white/10">
    <a class="absolute inset-0 z-[1]" href="#"></a>

    <!-- Icon -->
    <div class="relative last:after:hidden after:absolute after:top-0 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-gray-700 dark:group-hover:after:bg-gray-600">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <div class="size-2 rounded-full bg-white border-2 border-gray-300 group-hover:border-gray-600 dark:bg-gray-800 dark:border-gray-600"></div>
      </div>
    </div>
    <!-- End Icon -->

    <!-- Right Content -->
    <div class="grow p-2 pb-8">
      <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
        Take a break ⛳️
      </h3>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
        Just chill for now... 😉
      </p>
    </div>
    <!-- End Right Content -->
  </div>
  <!-- End Item -->
</div>
<!-- End Timeline -->

With time

Copied!
12:05PM

Created "Preline in React" task

Find more detailed insctructions here.

12:05PM

Release v5.2.0 quick bug fix 🐞

12:05PM

Marked "Install Charts" completed

Finally! You can check it out here.

12:05PM

Take a break ⛳️

Just chill for now... 😉 

        
<!-- Timeline -->
<div>
  <!-- Item -->
  <div class="flex gap-x-3">
    <!-- Left Content -->
    <div class="w-16 text-end">
      <span class="text-xs text-gray-500 dark:text-gray-400">12:05PM</span>
    </div>
    <!-- End Left Content -->

    <!-- Icon -->
    <div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-gray-700">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <div class="size-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
      </div>
    </div>
    <!-- End Icon -->

    <!-- Right Content -->
    <div class="grow pt-0.5 pb-8">
      <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
        <svg class="flex-shrink-0 size-4 mt-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
          <polyline points="14 2 14 8 20 8"></polyline>
          <line x1="16" x2="8" y1="13" y2="13"></line>
          <line x1="16" x2="8" y1="17" y2="17"></line>
          <line x1="10" x2="8" y1="9" y2="9"></line>
        </svg>
        Created "Preline in React" task
      </h3>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
        Find more detailed insctructions here.
      </p>
      <button type="button" class="mt-1 -ms-1 p-1 inline-flex items-center gap-x-2 text-xs rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-700">
        <img class="flex-shrink-0 size-4 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Image Description">
        James Collins
      </button>
    </div>
    <!-- End Right Content -->
  </div>
  <!-- End Item -->

  <!-- Item -->
  <div class="flex gap-x-3">
    <!-- Left Content -->
    <div class="w-16 text-end">
      <span class="text-xs text-gray-500 dark:text-gray-400">12:05PM</span>
    </div>
    <!-- End Left Content -->

    <!-- Icon -->
    <div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-gray-700">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <div class="size-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
      </div>
    </div>
    <!-- End Icon -->

    <!-- Right Content -->
    <div class="grow pt-0.5 pb-8">
      <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
        Release v5.2.0 quick bug fix 🐞
      </h3>
      <button type="button" class="mt-1 -ms-1 p-1 inline-flex items-center gap-x-2 text-xs rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-700">
        <span class="flex flex-shrink-0 justify-center items-center size-4 bg-white border border-gray-200 text-[10px] font-semibold uppercase text-gray-600 rounded-full dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
          A
        </span>
        Alex Gregarov
      </button>
    </div>
    <!-- End Right Content -->
  </div>
  <!-- End Item -->

  <!-- Item -->
  <div class="flex gap-x-3">
    <!-- Left Content -->
    <div class="w-16 text-end">
      <span class="text-xs text-gray-500 dark:text-gray-400">12:05PM</span>
    </div>
    <!-- End Left Content -->

    <!-- Icon -->
    <div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-gray-700">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <div class="size-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
      </div>
    </div>
    <!-- End Icon -->

    <!-- Right Content -->
    <div class="grow pt-0.5 pb-8">
      <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
        Marked "Install Charts" completed
      </h3>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
        Finally! You can check it out here.
      </p>
      <button type="button" class="mt-1 -ms-1 p-1 inline-flex items-center gap-x-2 text-xs rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-700">
        <img class="flex-shrink-0 size-4 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Image Description">
        James Collins
      </button>
    </div>
    <!-- End Right Content -->
  </div>
  <!-- End Item -->

  <!-- Item -->
  <div class="flex gap-x-3">
    <!-- Left Content -->
    <div class="w-16 text-end">
      <span class="text-xs text-gray-500 dark:text-gray-400">12:05PM</span>
    </div>
    <!-- End Left Content -->

    <!-- Icon -->
    <div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-gray-700">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <div class="size-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
      </div>
    </div>
    <!-- End Icon -->

    <!-- Right Content -->
    <div class="grow pt-0.5 pb-8">
      <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
        Take a break ⛳️
      </h3>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
        Just chill for now... 😉
      </p>
    </div>
    <!-- End Right Content -->
  </div>
  <!-- End Item -->
</div>
<!-- End Timeline -->

Icons and avatars

Copied!

1 Aug, 2023

Image Description

Created "Preline in React" task

Find more detailed insctructions here.

A

Release v5.2.0 quick bug fix 🐞

Image Description

Marked "Install Charts" completed

Finally! You can check it out here.

31 Jul, 2023

Take a break ⛳️

Just chill for now... 😉 

        
<!-- Timeline -->
<div>
  <!-- Heading -->
  <div class="ps-2 my-2 first:mt-0">
    <h3 class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
      1 Aug, 2023
    </h3>
  </div>
  <!-- End Heading -->

  <!-- Item -->
  <div class="flex gap-x-3">
    <!-- Icon -->
    <div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-gray-700">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <img class="flex-shrink-0 size-7 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Image Description">
      </div>
    </div>
    <!-- End Icon -->

    <!-- Right Content -->
    <div class="grow pt-0.5 pb-8">
      <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
        <svg class="flex-shrink-0 size-4 mt-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
          <polyline points="14 2 14 8 20 8"></polyline>
          <line x1="16" x2="8" y1="13" y2="13"></line>
          <line x1="16" x2="8" y1="17" y2="17"></line>
          <line x1="10" x2="8" y1="9" y2="9"></line>
        </svg>
        Created "Preline in React" task
      </h3>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
        Find more detailed insctructions here.
      </p>
      <button type="button" class="mt-1 -ms-1 p-1 inline-flex items-center gap-x-2 text-xs rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-700">
        <img class="flex-shrink-0 size-4 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Image Description">
        James Collins
      </button>
    </div>
    <!-- End Right Content -->
  </div>
  <!-- End Item -->

  <!-- Item -->
  <div class="flex gap-x-3">
    <!-- Icon -->
    <div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-gray-700">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <span class="flex flex-shrink-0 justify-center items-center size-7 border border-gray-200 text-sm font-semibold uppercase text-gray-800 rounded-full dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
          A
        </span>
      </div>
    </div>
    <!-- End Icon -->

    <!-- Right Content -->
    <div class="grow pt-0.5 pb-8">
      <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
        Release v5.2.0 quick bug fix 🐞
      </h3>
      <button type="button" class="mt-1 -ms-1 p-1 inline-flex items-center gap-x-2 text-xs rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-700">
        <span class="flex flex-shrink-0 justify-center items-center size-4 bg-white border border-gray-200 text-[10px] font-semibold uppercase text-gray-600 rounded-full dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
          A
        </span>
        Alex Gregarov
      </button>
    </div>
    <!-- End Right Content -->
  </div>
  <!-- End Item -->

  <!-- Item -->
  <div class="flex gap-x-3">
    <!-- Icon -->
    <div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-gray-700">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <img class="flex-shrink-0 size-7 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Image Description">
      </div>
    </div>
    <!-- End Icon -->

    <!-- Right Content -->
    <div class="grow pt-0.5 pb-8">
      <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
        Marked "Install Charts" completed
      </h3>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
        Finally! You can check it out here.
      </p>
      <button type="button" class="mt-1 -ms-1 p-1 inline-flex items-center gap-x-2 text-xs rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-700">
        <img class="flex-shrink-0 size-4 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Image Description">
        James Collins
      </button>
    </div>
    <!-- End Right Content -->
  </div>
  <!-- End Item -->

  <!-- Heading -->
  <div class="ps-2 my-2 first:mt-0">
    <h3 class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
      31 Jul, 2023
    </h3>
  </div>
  <!-- End Heading -->

  <!-- Item -->
  <div class="flex gap-x-3">
    <!-- Icon -->
    <div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-gray-700">
      <div class="relative z-10 size-7 flex justify-center items-center">
        <span class="flex flex-shrink-0 justify-center items-center size-7 bg-white border border-gray-200 text-[10px] font-semibold uppercase text-gray-600 rounded-full dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
          <svg class="flex-shrink-0 size-4 mt-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M16 3h5v5"></path>
            <path d="M8 3H3v5"></path>
            <path d="M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3"></path>
            <path d="m15 9 6-6"></path>
          </svg>
        </span>
      </div>
    </div>
    <!-- End Icon -->

    <!-- Right Content -->
    <div class="grow pt-0.5 pb-8">
      <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
        Take a break ⛳️
      </h3>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
        Just chill for now... 😉
      </p>
    </div>
    <!-- End Right Content -->
  </div>
  <!-- End Item -->
</div>
<!-- End Timeline -->

On this page