Timeline

Beautiful Tailwind timeline

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

Timeline

Author Brandon D

Tailwind v3.4 17.3k 14

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

Anja Müller

3 years ago

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

Komal Jain

2 years ago

12.8k
Stepper example
Explain How it works to your audience

Santos78

3 years ago

15.8k
Event timeline

Laurits

3 years ago

17.8k
Timeline
Timeline for tracking status of the things

Akshay

4 years ago

11.7k
Event timeline list

Laurits

3 years ago

14k
Simple stepper section
multipurpose verticle stepper

S. Patel

3 years ago

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

Shariar Hasan

2 years ago

4.9k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Coastal UI

1 year ago

2.8k
Table
Table with image and status with pagination buttons

Abhiraj

1 year ago

2.9k
Dark mode with Tailwind CSS and alpinjs

Michael Andreuzza

2 years ago

4k
Timeline
timeline with journey

Abhiraj

1 year ago

1.6k