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

14.8k

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

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

Author:
Komal Jain

1 year ago

10k
Stepper example
Explain How it works to your audience

Author:
Santos78

1 year ago

13.3k
Event timeline

Author:
Laurits

2 years ago

15.6k
Timeline
Timeline for tracking status of the things

Author:
Akshay

2 years ago

9.9k
Event timeline list

Author:
Laurits

2 years ago

12.1k
Simple stepper section
multipurpose verticle stepper

Author:
S. Patel

1 year ago

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

Author:
Shariar Hasan

1 year ago

2.8k
Multi-Step Form with Progress Indicator
reusable "Multi-Step Form with Progress Indicator" component built with HTML, CSS, and Tailwind CSS. It’s a practical component for forms like signups, surveys, or checkout processes.

Author:
Ayyamperumal S

4 weeks ago

242
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.

Author:
Coastal UI

3 months ago

753
Table
Table with image and status with pagination buttons

Author:
Abhiraj

1 month ago

626
Timeline
timeline with journey

Author:
Abhiraj

1 month ago

181

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components