Timeline

Timeline for tracking status of the things

This tailwind example is contributed by Akshay, on 25-Aug-2022. Component is made with Tailwind v3.4. similar terms for this example are Roadmap, Changelog

Timeline

Author Akshay

Tailwind v3.4 11.7k 17

Fork Fullscreen

<div class="p-4 mt-4">
  <h1 class="text-4xl text-center font-semibold mb-6">Package status</h1>
  <div class="container">
    <div class="flex flex-col md:grid grid-cols-12 text-gray-50">
      <div class="flex md:contents">
        <div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
          <div class="h-full w-6 flex items-center justify-center">
            <div class="h-full w-1 bg-green-500 pointer-events-none"></div>
          </div>
          <div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-green-500 shadow text-center">
            <i class="fas fa-check-circle text-white"></i>
          </div>
        </div>
        <div class="bg-green-500 col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
          <h3 class="font-semibold text-lg mb-1">Package Booked</h3>
          <p class="leading-tight text-justify w-full">
            21 July 2021, 04:30 PM
          </p>
        </div>
      </div>
      <div class="flex md:contents">
        <div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
          <div class="h-full w-6 flex items-center justify-center">
            <div class="h-full w-1 bg-green-500 pointer-events-none"></div>
          </div>
          <div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-green-500 shadow text-center">
            <i class="fas fa-check-circle text-white"></i>
          </div>
        </div>
        <div class="bg-green-500 col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
          <h3 class="font-semibold text-lg mb-1">Out for Delivery</h3>
          <p class="leading-tight text-justify">
            22 July 2021, 01:00 PM
          </p>
        </div>
      </div>
      <div class="flex md:contents">
        <div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
          <div class="h-full w-6 flex items-center justify-center">
            <div class="h-full w-1 bg-red-500 pointer-events-none"></div>
          </div>
          <div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-red-500 shadow text-center">
            <i class="fas fa-times-circle text-white"></i>
          </div>
        </div>
        <div class="bg-red-500 col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
          <h3 class="font-semibold text-lg mb-1 text-gray-50">Cancelled</h3>
          <p class="leading-tight text-justify">
            Customer cancelled the order
          </p>
        </div>
      </div>
      <div class="flex md:contents">
        <div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
          <div class="h-full w-6 flex items-center justify-center">
            <div class="h-full w-1 bg-gray-300 pointer-events-none"></div>
          </div>
          <div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-gray-300 shadow text-center">
            <i class="fas fa-exclamation-circle text-gray-400"></i>
          </div>
        </div>
        <div class="bg-gray-300 col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
          <h3 class="font-semibold text-lg mb-1 text-gray-400">Delivered</h3>
          <p class="leading-tight text-justify">
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Timeline
Beautiful Tailwind timeline

Brandon D

3 years ago

17.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
Timeline | Roadmap example
Display Recent Updates, Timeline or Rroadmap with this component

Anja Müller

2 years ago

13.3k
Event timeline

Laurits

3 years ago

17.8k
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
omerlinks Calendrier Glassmorphism
omerlinks Calendrier Glassmorphism

Omer fils ELENGA

8 months ago

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

Ayyamperumal S

1 year ago

2.6k
Sticky Changelog

Michael Andreuzza

2 years ago

3.1k