In this section we will create tailwind timeline ui, tailwind vertical timeline, tailwind step by step with icon timeline, tailwind timeline left to right side, tailwind v3 timeline example with Tailwind CSS.
How to install & setup Tailwind CSS v3
Example 1
tailwind simple timeline notification list.
<div class="relative max-w-2xl">
<div class="absolute top-0 h-full border-r-2 border-gray-500 left-3"></div>
<ul class="space-y-2">
<li>
<div class="flex items-center">
<span class="w-6 h-6 bg-gray-500 rounded-full"></span>
<h5 class="ml-4 font-bold text-gray-600">Tailwind CSS 3.0</h5>
</div>
<div class="ml-12">
<p class="text-sm text-gray-500">Lorem ipsum, dolor sit amet consectetur Lorem, ipsum dolor si</p>
</div>
</li>
<li>
<div class="flex items-center">
<span class="w-6 h-6 bg-gray-500 rounded-full"></span>
<h5 class="ml-4 font-bold text-gray-600">Tailwind CSS 3.0.5v</h5>
</div>
<div class="ml-12">
<p class="text-sm text-gray-500">Lorem ipsum, dolor sit amet consectetur Lorem, ipsum dolor si</p>
</div>
</li>
<li>
<div class="flex items-center">
<span class="w-6 h-6 bg-gray-500 rounded-full"></span>
<h5 class="ml-4 font-bold text-gray-600">Tailwind CSS 3.0.7v</h5>
</div>
<div class="ml-12">
<p class="text-sm text-gray-500">Lorem ipsum, dolor sit amet consectetur Lorem, ipsum dolor si</p>
</div>
</li>
</ul>
</div>
Example 2
tailwind css vertical step to step timeline with heroicons icon.
<div class="w-1/2">
<div class="flex">
<div class="flex flex-col items-center mr-4">
<div>
<div class="flex items-center justify-center w-10 h-10 border rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-gray-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 13l-5 5m0 0l-5-5m5 5V6" />
</svg>
</div>
</div>
<div class="w-px h-full bg-gray-300"></div>
</div>
<div class="pb-8 ">
<p class="mb-2 text-xl font-bold text-gray-600">Step 1</p>
<p class="text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. veniam libero facilis minus reprehenderit.
</p>
</div>
</div>
<div class="flex">
<div class="flex flex-col items-center mr-4">
<div>
<div class="flex items-center justify-center w-10 h-10 border rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-gray-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 13l-5 5m0 0l-5-5m5 5V6" />
</svg>
</div>
</div>
<div class="w-px h-full bg-gray-300"></div>
</div>
<div class="pb-8 ">
<p class="mb-2 text-xl font-bold text-gray-600">Step 2</p>
<p class="text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. veniam libero facilis minus reprehenderit.
</p>
</div>
</div>
<div class="flex">
<div class="flex flex-col items-center mr-4">
<div>
<div class="flex items-center justify-center w-10 h-10 border rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-gray-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 13l-5 5m0 0l-5-5m5 5V6" />
</svg>
</div>
</div>
<div class="w-px h-full bg-gray-300"></div>
</div>
<div class="pb-8 ">
<p class="mb-2 text-xl font-bold text-gray-600">Step 3</p>
<p class="text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. veniam libero facilis minus reprehenderit.
</p>
</div>
</div>
<div class="flex">
<div class="flex flex-col items-center mr-4">
<div>
<div class="flex items-center justify-center w-10 h-10 border rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-gray-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
</div>
</div>
<div class="pt-1">
<p class="mb-2 text-lg font-bold text-gray-600">Done</p>
</div>
</div>
</div>
tailwind css vertical timeline
Example 3
tailwind v3 vertical left to right side timeline .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>tailwind 3 vertical left side right timeline</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex flex-col justify-center py-6 lg:py-12">
<div class="w-full mx-auto lg:max-w-4xl">
<div class="relative">
<!-- Vertical middle line-->
<div class="absolute hidden w-px h-full transform -translate-x-1/2 bg-indigo-300 lg:block left-1/2"></div>
<div class="space-y-12 lg:space-y-8">
<!-- Left section -->
<div>
<div class="flex flex-col items-center">
<div class="flex items-center justify-start w-full mx-auto">
<div class="w-full lg:w-1/2 lg:pr-8">
<div class="p-4 bg-white rounded shadow-lg shadow-cyan-300">
<p>Lorem, ipsum dolor sit amet consectetur dolor elit. </p>
</div>
</div>
</div>
<div
class="absolute flex items-center justify-center w-8 h-8 transform -translate-x-1/2 -translate-y-4 bg-indigo-400 border-2 border-red-200 rounded-full left-1/2 sm:translate-y-0">
<span class="text-white">1</span>
</div>
</div>
</div>
<!-- Right section -->
<div>
<div class="flex flex-col items-center">
<div class="flex items-center justify-end w-full mx-auto">
<div class="w-full lg:w-1/2 lg:pl-8">
<div class="p-4 bg-white rounded shadow-lg shadow-red-300">
<p>Lorem, ipsum dolor sit amet consectetur dolor elit. </p>
</div>
</div>
</div>
<div
class="absolute flex items-center justify-center w-8 h-8 transform -translate-x-1/2 -translate-y-4 bg-indigo-400 border-2 border-red-200 rounded-full left-1/2 sm:translate-y-0">
<span class="text-white">2</span>
</div>
</div>
</div>
<!-- Left section -->
<div>
<div class="flex flex-col items-center">
<div class="flex items-center justify-start w-full mx-auto">
<div class="w-full lg:w-1/2 lg:pr-8">
<div class="p-4 bg-white rounded shadow-lg shadow-yellow-300">
<p>Lorem, ipsum dolor sit amet consectetur dolor elit. </p>
</div>
</div>
</div>
<div
class="absolute flex items-center justify-center w-8 h-8 transform -translate-x-1/2 -translate-y-4 bg-indigo-400 border-2 border-red-200 rounded-full left-1/2 sm:translate-y-0">
<span class="text-white">3</span>
</div>
</div>
</div>
<!-- Right section -->
<div>
<div class="flex flex-col items-center">
<div class="flex items-center justify-end w-full mx-auto">
<div class="w-full lg:w-1/2 lg:pl-8">
<div class="p-4 bg-white rounded shadow-lg shadow-lime-300">
<p>Lorem, ipsum dolor sit amet consectetur dolor elit. </p>
</div>
</div>
</div>
<div
class="absolute flex items-center justify-center w-8 h-8 transform -translate-x-1/2 -translate-y-4 bg-indigo-400 border-2 border-red-200 rounded-full left-1/2 sm:translate-y-0">
<span class="text-white">4</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
tailwind 3 vertical left side right timeline
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS Gradient Button Example
Tailwind CSS 3D Button Example
Tailwind CSS Loading Button Example
Tailwind CSS v3 Cards Examples
Tailwind CSS Checkbox Form Examples
Tailwind CSS Dropdowns (Menu) on Hover Example
Tailwind CSS Multiselect Dropdown Example
How to use dark mode toggle switch in Tailwind CSS 3
How to use @apply directive in Tailwind CSS
Tailwind CSS sticky header & fixed navbar example
Tailwind CSS Navbar UI Example
Tailwind CSS 3 Login Page UI Example
Tailwind CSS Login Modal Example
Tailwind CSS 3 Overlay Image Example
Tailwind CSS Thank You Page Example
Tailwind CSS Timeline UI Example
Tailwind CSS Responsive Footer Section Example
Tailwind CSS Background Image Header Example