Timeline Component
A responsive timeline component with dark mode support and microinteractions using Tailwind CSS. No JavaScript required.
HTML Code
<div class="container mx-auto px-4 py-8">
<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-blue-800 pointer-events-none"></div>
</div>
<div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-blue-500 shadow text-center">
<i class="fas fa-check-circle text-white"></i>
</div>
</div>
<div class="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">Event Title 1</h3>
<p class="leading-tight text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et nunc id erat facilisis ultricies sed ac erat.
</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-blue-800 pointer-events-none"></div>
</div>
<div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-blue-500 shadow text-center">
<i class="fas fa-check-circle text-white"></i>
</div>
</div>
<div class="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">Event Title 2</h3>
<p class="leading-tight text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et nunc id erat facilisis ultricies sed ac erat.
</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-blue-800 pointer-events-none"></div>
</div>
<div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-blue-500 shadow text-center">
<i class="fas fa-check-circle text-white"></i>
</div>
</div>
<div class="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">Event Title 3</h3>
<p class="leading-tight text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et nunc id erat facilisis ultricies sed ac erat.
</p>
</div>
</div>
</div>
</div>
Related Components
Timeline Component
A simple, responsive timeline component with a monochromatic color scheme and subtle 3D effects, suitable for travel/tourism websites. Includes dark mode support.
Bauhaus Timeline Component
A simple, responsive timeline component with Bauhaus-inspired design using geometric forms and primary analogous colors, suitable for booking/reservation systems. Includes dark mode support.
Grayscale Social Media Timeline
A responsive, dark-mode ready social media timeline component built with Tailwind CSS. It features a strict grayscale color scheme, and complex post cards with user avatars, post content (text and images), engagement stats, and action buttons. Designed for social networking interfaces with multiple interactive elements on each post. The design supports dark backgrounds to reduce eye strain. No JavaScript is used.