Home
Akshay
Timeline

Timeline

Timeline for tracking status of the things

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

Timeline

Author Akshay

10.8k

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

Author:
Brandon D

2 years ago

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

Author:
Komal Jain

1 year ago

11.5k
Stepper example
Explain How it works to your audience

Author:
Santos78

2 years ago

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

Author:
Anja Müller

2 years ago

12.1k
Event timeline

Author:
Laurits

2 years ago

16.7k
Event timeline list

Author:
Laurits

2 years ago

13.1k
Simple stepper section
multipurpose verticle stepper

Author:
S. Patel

2 years ago

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

Author:
Shariar Hasan

1 year ago

3.6k
Sticky Changelog

Author:
Michael Andreuzza

1 year ago

2k
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

8 months ago

1.5k
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

10 months ago

1.5k
Dark mode with Tailwind CSS and alpinjs

Author:
Michael Andreuzza

1 year ago

3.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components