Home
Brandon D
Timeline

Timeline

Beautiful Tailwind timeline

This tailwind example is contributed by Brandon D, on 10-Oct-2022. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Roadmap, Changelog

Timeline

Author Brandon D

13k

Fork Fullscreen

<div class="bg-gray-100 p-6 flex flex-col sm:py-12">
  <ul class="list-none">
    <li class="rounded-lg group cursor-pointer">
      <div class="flex flex-row">
        <div class="items-center flex flex-col justify-around">
          <div class="border-l-2 h-full border-gray-400"></div>
          <div class="bg-green-400 border-2 border-gray-400 rounded-full h-8 w-8 flex flex-grow justify-around">
            <svg class="flex-none m-2 w-4 h-4 opacity-0 group-hover:opacity-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
          </div>
          <div class="border-l-2 h-full border-gray-400"></div>
        </div>
        <div class="flex flex-col group-hover:bg-white ml-2 p-2 pr-6 rounded-xl">
          <div class="ml-4 text-xl font-medium">/ Running</div>
          <div class="ml-4 mb-2 text-xs">24 Oct 12:42 - 27 Oct 12:15</div>
          <div class="ml-4 text-sm">Normal operations</div>
        </div>
      </div>
    </li>
    <li class="rounded-lg group cursor-pointer">
      <div class="flex flex-row">
        <div class="items-center flex flex-col justify-around">
          <div class="border-l-2 h-full border-gray-400"></div>
          <div class="bg-red-400 border-2 border-gray-400 rounded-full h-8 w-8 flex flex-grow justify-around">
            <svg class="flex-none m-2 w-4 h-4 opacity-0 group-hover:opacity-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
          </div>
          <div class="border-l-2 h-full border-gray-400"></div>
        </div>
        <div class="flex flex-col group-hover:bg-white ml-2 p-2 pr-6 rounded-xl">
          <div class="ml-4 text-xl font-medium">/ Availability / No Operations</div>
          <div class="ml-4 mb-2 text-xs">24 Oct 12:42 - 27 Oct 12:15</div>
          <div class="ml-4 text-sm">Normal operations</div>
        </div>
      </div>
    </li>
    <li class="rounded-lg group cursor-pointer">
      <div class="flex flex-row">
        <div class="items-center flex flex-col justify-around">
          <div class="border-l-2 h-full border-gray-400"></div>
          <div class="bg-green-400 border-2 border-gray-400 rounded-full h-8 w-8 flex flex-grow justify-around">
            <svg class="flex-none m-2 w-4 h-4 opacity-0 group-hover:opacity-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
          </div>
          <div class="border-l-2 h-full border-gray-400"></div>
        </div>
        <div class="flex flex-col group-hover:bg-white ml-2 p-2 pr-6 rounded-xl">
          <div class="ml-4 text-xl font-medium">/ Running</div>
          <div class="ml-4 mb-2 text-xs">24 Oct 12:42 - 27 Oct 12:15</div>
          <div class="ml-4 text-sm">Normal operations</div>
        </div>
      </div>
    </li>
  </ul>
</div>

Related Examples

Timeline | Roadmap example
Display Recent Updates, Timeline or Rroadmap with this component

Author:
Anja Müller

1 year ago

8.7k
Event Timeline
Timeline component for tracking the progression of events over time. It features alternating card sections

Author:
Komal Jain

11 months ago

8.3k
Stepper example
Explain How it works to your audience

Author:
Santos78

1 year ago

11.7k
Event timeline

Author:
Laurits

1 year ago

14.6k
Timeline
Timeline for tracking status of the things

Author:
Akshay

2 years ago

9k
Event timeline list

Author:
Laurits

1 year ago

11.4k
Simple stepper section
multipurpose verticle stepper

Author:
S. Patel

1 year ago

8k
Timeline Component
This component is responsive for Mobile & Desktop & Dark mode Supported.

Author:
Shariar Hasan

7 months ago

1.7k
Dark mode with Tailwind CSS and alpinjs

Author:
Michael Andreuzza

5 months ago

1.1k
Sticky Changelog

Author:
Michael Andreuzza

5 months ago

783
Form Layouts

Author:
Anonymous

6 months ago

1.1k
Maintenance page template
The site is under maintenance placeholder page

Author:
Anonymous

9 months ago

4.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 1600+ componenent