Timeline Components
Beautiful timeline components built with TailwindCSS. Perfect for showcasing events, history, and progress in chronological order.
1. Simple Vertical Timeline
Clean vertical timeline with dots, dates, and content for chronological events.
January 2023
Company Founded
Started with a vision to revolutionize web development with modern tools and frameworks.
March 2023
First Product Launch
Released our flagship product with overwhelming positive feedback from early users.
June 2023
1000+ Users Milestone
Reached our first major milestone with over 1000 active users worldwide.
<!-- Simple Vertical Timeline -->
<div class="max-w-2xl mx-auto">
<div class="relative">
<!-- Timeline Item 1 -->
<div class="flex items-start mb-8">
<div class="flex-shrink-0 w-4 h-4 bg-purple-600 rounded-full mt-1.5"></div>
<div class="ml-4 md:ml-6">
<div class="text-sm text-gray-500 mb-1">January 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Company Founded</h3>
<p class="text-gray-600">Started with a vision to revolutionize web development with modern tools and frameworks.</p>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="flex items-start mb-8">
<div class="flex-shrink-0 w-4 h-4 bg-purple-600 rounded-full mt-1.5"></div>
<div class="ml-4 md:ml-6">
<div class="text-sm text-gray-500 mb-1">March 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">First Product Launch</h3>
<p class="text-gray-600">Released our flagship product with overwhelming positive feedback from early users.</p>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="flex items-start">
<div class="flex-shrink-0 w-4 h-4 bg-purple-600 rounded-full mt-1.5"></div>
<div class="ml-4 md:ml-6">
<div class="text-sm text-gray-500 mb-1">June 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">1000+ Users Milestone</h3>
<p class="text-gray-600">Reached our first major milestone with over 1000 active users worldwide.</p>
</div>
</div>
</div>
</div><template>
<!-- Simple Vertical Timeline -->
<div class="max-w-2xl mx-auto">
<div class="relative">
<!-- Timeline Item 1 -->
<div class="flex items-start mb-8">
<div class="flex-shrink-0 w-4 h-4 bg-purple-600 rounded-full mt-1.5"></div>
<div class="ml-4 md:ml-6">
<div class="text-sm text-gray-500 mb-1">January 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Company Founded</h3>
<p class="text-gray-600">Started with a vision to revolutionize web development with modern tools and frameworks.</p>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="flex items-start mb-8">
<div class="flex-shrink-0 w-4 h-4 bg-purple-600 rounded-full mt-1.5"></div>
<div class="ml-4 md:ml-6">
<div class="text-sm text-gray-500 mb-1">March 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">First Product Launch</h3>
<p class="text-gray-600">Released our flagship product with overwhelming positive feedback from early users.</p>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="flex items-start">
<div class="flex-shrink-0 w-4 h-4 bg-purple-600 rounded-full mt-1.5"></div>
<div class="ml-4 md:ml-6">
<div class="text-sm text-gray-500 mb-1">June 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">1000+ Users Milestone</h3>
<p class="text-gray-600">Reached our first major milestone with over 1000 active users worldwide.</p>
</div>
</div>
</div>
</div>
</template>export default function SimpleVerticalTimeline() {
return (
<div className="max-w-2xl mx-auto">
<div className="relative">
<!-- Timeline Item 1 -->
<div className="flex items-start mb-8">
<div className="flex-shrink-0 w-4 h-4 bg-purple-600 rounded-full mt-1.5"></div>
<div className="ml-4 md:ml-6">
<div className="text-sm text-gray-500 mb-1">January 2023</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">Company Founded</h3>
<p className="text-gray-600">Started with a vision to revolutionize web development with modern tools and frameworks.</p>
</div>
</div>
<!-- Timeline Item 2 -->
<div className="flex items-start mb-8">
<div className="flex-shrink-0 w-4 h-4 bg-purple-600 rounded-full mt-1.5"></div>
<div className="ml-4 md:ml-6">
<div className="text-sm text-gray-500 mb-1">March 2023</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">First Product Launch</h3>
<p className="text-gray-600">Released our flagship product with overwhelming positive feedback from early users.</p>
</div>
</div>
<!-- Timeline Item 3 -->
<div className="flex items-start">
<div className="flex-shrink-0 w-4 h-4 bg-purple-600 rounded-full mt-1.5"></div>
<div className="ml-4 md:ml-6">
<div className="text-sm text-gray-500 mb-1">June 2023</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">1000+ Users Milestone</h3>
<p className="text-gray-600">Reached our first major milestone with over 1000 active users worldwide.</p>
</div>
</div>
</div>
</div>
);
}2. Timeline with Cards
Enhanced timeline with card-based content and alternating layout for better visual hierarchy.
Q1 2023
Planning Phase
Comprehensive market research and product planning to identify user needs.
Q2 2023
Development
Agile development process with regular iterations and user feedback.
Q3 2023
Launch
Successful product launch with comprehensive marketing campaign.
<!-- Timeline with Cards -->
<div class="max-w-4xl mx-auto">
<div class="relative">
<!-- Timeline Line - Mobile: Left side, Desktop: Center -->
<div class="absolute left-4 md:left-1/2 md:transform md:-translate-x-1/2 top-0 bottom-0 w-0.5 bg-gray-300 z-0"></div>
<!-- Timeline Item 1 -->
<div class="flex items-start md:items-center mb-8">
<!-- Mobile: Dot on left, content on right -->
<div class="flex-shrink-0 w-4 h-4 bg-purple-600 rounded-full border-4 border-white z-10 mt-1.5 md:hidden"></div>
<div class="ml-4 md:ml-0 md:w-full md:flex md:items-center">
<!-- Desktop: Left content -->
<div class="md:w-1/2 md:pr-8 md:text-right">
<div class="bg-white rounded-lg shadow-lg p-4 md:p-6">
<div class="text-sm text-gray-500 mb-2">Q1 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Planning Phase</h3>
<p class="text-gray-600">Comprehensive market research and product planning to identify user needs.</p>
</div>
</div>
<!-- Desktop: Center dot -->
<div class="hidden md:flex w-4 h-4 bg-purple-600 rounded-full border-4 border-white z-10"></div>
<!-- Desktop: Right empty space -->
<div class="hidden md:block md:w-1/2 md:pl-8"></div>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="flex items-start md:items-center mb-8">
<!-- Mobile: Dot on left, content on right -->
<div class="flex-shrink-0 w-4 h-4 bg-purple-600 rounded-full border-4 border-white z-10 mt-1.5 md:hidden"></div>
<div class="ml-4 md:ml-0 md:w-full md:flex md:items-center">
<!-- Desktop: Left empty space -->
<div class="hidden md:block md:w-1/2 md:pr-8"></div>
<!-- Desktop: Center dot -->
<div class="hidden md:flex w-4 h-4 bg-purple-600 rounded-full border-4 border-white z-10"></div>
<!-- Desktop: Right content -->
<div class="md:w-1/2 md:pl-8">
<div class="bg-white rounded-lg shadow-lg p-4 md:p-6">
<div class="text-sm text-gray-500 mb-2">Q2 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Development</h3>
<p class="text-gray-600">Agile development process with regular iterations and user feedback.</p>
</div>
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="flex items-start md:items-center">
<!-- Mobile: Dot on left, content on right -->
<div class="flex-shrink-0 w-4 h-4 bg-purple-600 rounded-full border-4 border-white z-10 mt-1.5 md:hidden"></div>
<div class="ml-4 md:ml-0 md:w-full md:flex md:items-center">
<!-- Desktop: Left content -->
<div class="md:w-1/2 md:pr-8 md:text-right">
<div class="bg-white rounded-lg shadow-lg p-4 md:p-6">
<div class="text-sm text-gray-500 mb-2">Q3 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Launch</h3>
<p class="text-gray-600">Successful product launch with comprehensive marketing campaign.</p>
</div>
</div>
<!-- Desktop: Center dot -->
<div class="hidden md:flex w-4 h-4 bg-purple-600 rounded-full border-4 border-white z-10"></div>
<!-- Desktop: Right empty space -->
<div class="hidden md:block md:w-1/2 md:pl-8"></div>
</div>
</div>
</div>
</div>
<template>
<!-- Timeline with Cards -->
<div class="max-w-4xl mx-auto">
<div class="relative">
<!-- Timeline Line - Mobile: Left side, Desktop: Center -->
<div class="absolute left-4 md:left-1/2 md:transform md:-translate-x-1/2 top-0 bottom-0 w-0.5 bg-gray-300 z-0"></div>
<!-- Timeline Item 1 -->
<div class="flex items-start md:items-center mb-8">
<!-- Mobile: Dot on left, content on right -->
<div class="flex-shrink-0 w-4 h-4 bg-purple-600 rounded-full border-4 border-white z-10 mt-1.5 md:hidden"></div>
<div class="ml-4 md:ml-0 md:w-full md:flex md:items-center">
<!-- Desktop: Left content -->
<div class="md:w-1/2 md:pr-8 md:text-right">
<div class="bg-white rounded-lg shadow-lg p-4 md:p-6">
<div class="text-sm text-gray-500 mb-2">Q1 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Planning Phase</h3>
<p class="text-gray-600">Comprehensive market research and product planning to identify user needs.</p>
</div>
</div>
<!-- Desktop: Center dot -->
<div class="hidden md:flex w-4 h-4 bg-purple-600 rounded-full border-4 border-white z-10"></div>
<!-- Desktop: Right empty space -->
<div class="hidden md:block md:w-1/2 md:pl-8"></div>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="flex items-start md:items-center mb-8">
<!-- Mobile: Dot on left, content on right -->
<div class="flex-shrink-0 w-4 h-4 bg-purple-600 rounded-full border-4 border-white z-10 mt-1.5 md:hidden"></div>
<div class="ml-4 md:ml-0 md:w-full md:flex md:items-center">
<!-- Desktop: Left empty space -->
<div class="hidden md:block md:w-1/2 md:pr-8"></div>
<!-- Desktop: Center dot -->
<div class="hidden md:flex w-4 h-4 bg-purple-600 rounded-full border-4 border-white z-10"></div>
<!-- Desktop: Right content -->
<div class="md:w-1/2 md:pl-8">
<div class="bg-white rounded-lg shadow-lg p-4 md:p-6">
<div class="text-sm text-gray-500 mb-2">Q2 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Development</h3>
<p class="text-gray-600">Agile development process with regular iterations and user feedback.</p>
</div>
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="flex items-start md:items-center">
<!-- Mobile: Dot on left, content on right -->
<div class="flex-shrink-0 w-4 h-4 bg-purple-600 rounded-full border-4 border-white z-10 mt-1.5 md:hidden"></div>
<div class="ml-4 md:ml-0 md:w-full md:flex md:items-center">
<!-- Desktop: Left content -->
<div class="md:w-1/2 md:pr-8 md:text-right">
<div class="bg-white rounded-lg shadow-lg p-4 md:p-6">
<div class="text-sm text-gray-500 mb-2">Q3 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Launch</h3>
<p class="text-gray-600">Successful product launch with comprehensive marketing campaign.</p>
</div>
</div>
<!-- Desktop: Center dot -->
<div class="hidden md:flex w-4 h-4 bg-purple-600 rounded-full border-4 border-white z-10"></div>
<!-- Desktop: Right empty space -->
<div class="hidden md:block md:w-1/2 md:pl-8"></div>
</div>
</div>
</div>
</div>
</template>export default function TimelineWithCards() {
return (
<div className="max-w-4xl mx-auto">
<div className="relative">
<!-- Timeline Line - Mobile: Left side, Desktop: Center -->
<div className="absolute left-4 md:left-1/2 md:transform md:-translate-x-1/2 top-0 bottom-0 w-0.5 bg-gray-300 z-0"></div>
<!-- Timeline Item 1 -->
<div className="flex items-start md:items-center mb-8">
<!-- Mobile: Dot on left, content on right -->
<div className="flex-shrink-0 w-4 h-4 bg-purple-600 rounded-full border-4 border-white z-10 mt-1.5 md:hidden"></div>
<div className="ml-4 md:ml-0 md:w-full md:flex md:items-center">
<!-- Desktop: Left content -->
<div className="md:w-1/2 md:pr-8 md:text-right">
<div className="bg-white rounded-lg shadow-lg p-4 md:p-6">
<div className="text-sm text-gray-500 mb-2">Q1 2023</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">Planning Phase</h3>
<p className="text-gray-600">Comprehensive market research and product planning to identify user needs.</p>
</div>
</div>
<!-- Desktop: Center dot -->
<div className="hidden md:flex w-4 h-4 bg-purple-600 rounded-full border-4 border-white z-10"></div>
<!-- Desktop: Right empty space -->
<div className="hidden md:block md:w-1/2 md:pl-8"></div>
</div>
</div>
<!-- Timeline Item 2 -->
<div className="flex items-start md:items-center mb-8">
<!-- Mobile: Dot on left, content on right -->
<div className="flex-shrink-0 w-4 h-4 bg-purple-600 rounded-full border-4 border-white z-10 mt-1.5 md:hidden"></div>
<div className="ml-4 md:ml-0 md:w-full md:flex md:items-center">
<!-- Desktop: Left empty space -->
<div className="hidden md:block md:w-1/2 md:pr-8"></div>
<!-- Desktop: Center dot -->
<div className="hidden md:flex w-4 h-4 bg-purple-600 rounded-full border-4 border-white z-10"></div>
<!-- Desktop: Right content -->
<div className="md:w-1/2 md:pl-8">
<div className="bg-white rounded-lg shadow-lg p-4 md:p-6">
<div className="text-sm text-gray-500 mb-2">Q2 2023</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">Development</h3>
<p className="text-gray-600">Agile development process with regular iterations and user feedback.</p>
</div>
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div className="flex items-start md:items-center">
<!-- Mobile: Dot on left, content on right -->
<div className="flex-shrink-0 w-4 h-4 bg-purple-600 rounded-full border-4 border-white z-10 mt-1.5 md:hidden"></div>
<div className="ml-4 md:ml-0 md:w-full md:flex md:items-center">
<!-- Desktop: Left content -->
<div className="md:w-1/2 md:pr-8 md:text-right">
<div className="bg-white rounded-lg shadow-lg p-4 md:p-6">
<div className="text-sm text-gray-500 mb-2">Q3 2023</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">Launch</h3>
<p className="text-gray-600">Successful product launch with comprehensive marketing campaign.</p>
</div>
</div>
<!-- Desktop: Center dot -->
<div className="hidden md:flex w-4 h-4 bg-purple-600 rounded-full border-4 border-white z-10"></div>
<!-- Desktop: Right empty space -->
<div className="hidden md:block md:w-1/2 md:pl-8"></div>
</div>
</div>
</div>
</div>
);
}3. Horizontal Timeline
Horizontal timeline layout perfect for responsive designs and limited vertical space.
1
Jan 2023
Foundation
Company established with core team and initial vision.
2
Apr 2023
MVP Launch
First version released to gather user feedback.
3
Jul 2023
Growth
Rapid user acquisition and feature expansion.
4
Oct 2023
Scale
Infrastructure upgrades and team expansion.
<!-- Horizontal Timeline -->
<div class="max-w-4xl mx-auto overflow-x-auto">
<div class="flex flex-col md:flex-row items-center justify-between min-w-max md:min-w-0">
<!-- Timeline Item 1 -->
<div class="flex flex-col items-center text-center mb-8 md:mb-0">
<div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center mb-4">
<span class="text-white font-bold">1</span>
</div>
<div class="text-sm text-gray-500 mb-2">Jan 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Foundation</h3>
<p class="text-gray-600 text-sm max-w-xs">Company established with core team and initial vision.</p>
</div>
<!-- Connector Line -->
<div class="flex-1 h-0.5 bg-gray-300 mx-4 hidden md:block"></div>
<!-- Timeline Item 2 -->
<div class="flex flex-col items-center text-center mb-8 md:mb-0">
<div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center mb-4">
<span class="text-white font-bold">2</span>
</div>
<div class="text-sm text-gray-500 mb-2">Apr 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">MVP Launch</h3>
<p class="text-gray-600 text-sm max-w-xs">First version released to gather user feedback.</p>
</div>
<!-- Connector Line -->
<div class="flex-1 h-0.5 bg-gray-300 mx-4 hidden md:block"></div>
<!-- Timeline Item 3 -->
<div class="flex flex-col items-center text-center mb-8 md:mb-0">
<div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center mb-4">
<span class="text-white font-bold">3</span>
</div>
<div class="text-sm text-gray-500 mb-2">Jul 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Growth</h3>
<p class="text-gray-600 text-sm max-w-xs">Rapid user acquisition and feature expansion.</p>
</div>
<!-- Connector Line -->
<div class="flex-1 h-0.5 bg-gray-300 mx-4 hidden md:block"></div>
<!-- Timeline Item 4 -->
<div class="flex flex-col items-center text-center">
<div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center mb-4">
<span class="text-white font-bold">4</span>
</div>
<div class="text-sm text-gray-500 mb-2">Oct 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Scale</h3>
<p class="text-gray-600 text-sm max-w-xs">Infrastructure upgrades and team expansion.</p>
</div>
</div>
</div><template>
<!-- Horizontal Timeline -->
<div class="max-w-4xl mx-auto overflow-x-auto">
<div class="flex flex-col md:flex-row items-center justify-between min-w-max md:min-w-0">
<!-- Timeline Item 1 -->
<div class="flex flex-col items-center text-center mb-8 md:mb-0">
<div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center mb-4">
<span class="text-white font-bold">1</span>
</div>
<div class="text-sm text-gray-500 mb-2">Jan 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Foundation</h3>
<p class="text-gray-600 text-sm max-w-xs">Company established with core team and initial vision.</p>
</div>
<!-- Connector Line -->
<div class="flex-1 h-0.5 bg-gray-300 mx-4 hidden md:block"></div>
<!-- Timeline Item 2 -->
<div class="flex flex-col items-center text-center mb-8 md:mb-0">
<div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center mb-4">
<span class="text-white font-bold">2</span>
</div>
<div class="text-sm text-gray-500 mb-2">Apr 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">MVP Launch</h3>
<p class="text-gray-600 text-sm max-w-xs">First version released to gather user feedback.</p>
</div>
<!-- Connector Line -->
<div class="flex-1 h-0.5 bg-gray-300 mx-4 hidden md:block"></div>
<!-- Timeline Item 3 -->
<div class="flex flex-col items-center text-center mb-8 md:mb-0">
<div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center mb-4">
<span class="text-white font-bold">3</span>
</div>
<div class="text-sm text-gray-500 mb-2">Jul 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Growth</h3>
<p class="text-gray-600 text-sm max-w-xs">Rapid user acquisition and feature expansion.</p>
</div>
<!-- Connector Line -->
<div class="flex-1 h-0.5 bg-gray-300 mx-4 hidden md:block"></div>
<!-- Timeline Item 4 -->
<div class="flex flex-col items-center text-center">
<div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center mb-4">
<span class="text-white font-bold">4</span>
</div>
<div class="text-sm text-gray-500 mb-2">Oct 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Scale</h3>
<p class="text-gray-600 text-sm max-w-xs">Infrastructure upgrades and team expansion.</p>
</div>
</div>
</div>
</template>export default function HorizontalTimeline() {
return (
<div className="max-w-4xl mx-auto overflow-x-auto">
<div className="flex flex-col md:flex-row items-center justify-between min-w-max md:min-w-0">
<!-- Timeline Item 1 -->
<div className="flex flex-col items-center text-center mb-8 md:mb-0">
<div className="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center mb-4">
<span className="text-white font-bold">1</span>
</div>
<div className="text-sm text-gray-500 mb-2">Jan 2023</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">Foundation</h3>
<p className="text-gray-600 text-sm max-w-xs">Company established with core team and initial vision.</p>
</div>
<!-- Connector Line -->
<div className="flex-1 h-0.5 bg-gray-300 mx-4 hidden md:block"></div>
<!-- Timeline Item 2 -->
<div className="flex flex-col items-center text-center mb-8 md:mb-0">
<div className="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center mb-4">
<span className="text-white font-bold">2</span>
</div>
<div className="text-sm text-gray-500 mb-2">Apr 2023</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">MVP Launch</h3>
<p className="text-gray-600 text-sm max-w-xs">First version released to gather user feedback.</p>
</div>
<!-- Connector Line -->
<div className="flex-1 h-0.5 bg-gray-300 mx-4 hidden md:block"></div>
<!-- Timeline Item 3 -->
<div className="flex flex-col items-center text-center mb-8 md:mb-0">
<div className="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center mb-4">
<span className="text-white font-bold">3</span>
</div>
<div className="text-sm text-gray-500 mb-2">Jul 2023</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">Growth</h3>
<p className="text-gray-600 text-sm max-w-xs">Rapid user acquisition and feature expansion.</p>
</div>
<!-- Connector Line -->
<div className="flex-1 h-0.5 bg-gray-300 mx-4 hidden md:block"></div>
<!-- Timeline Item 4 -->
<div className="flex flex-col items-center text-center">
<div className="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center mb-4">
<span className="text-white font-bold">4</span>
</div>
<div className="text-sm text-gray-500 mb-2">Oct 2023</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">Scale</h3>
<p className="text-gray-600 text-sm max-w-xs">Infrastructure upgrades and team expansion.</p>
</div>
</div>
</div>
);
}4. Timeline with Icons
Timeline featuring icons for each milestone with enhanced visual appeal.
January 2023
Company Founded
Started with a vision to revolutionize web development.
March 2023
First Product Launch
Released our flagship product with positive feedback.
June 2023
1000+ Users Milestone
Reached our first major milestone worldwide.
<!-- Timeline with Icons -->
<div class="max-w-2xl mx-auto">
<div class="relative">
<!-- Vertical Line -->
<div class="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-300 z-0"></div>
<!-- Timeline Item 1 -->
<div class="flex items-start mb-8 relative z-10">
<div class="flex-shrink-0 w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center border-4 border-white">
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
</svg>
</div>
<div class="ml-4 md:ml-6">
<div class="text-sm text-gray-500 mb-1">January 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Company Founded</h3>
<p class="text-gray-600">Started with a vision to revolutionize web development.</p>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="flex items-start mb-8 relative z-10">
<div class="flex-shrink-0 w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center border-4 border-white">
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<div class="ml-4 md:ml-6">
<div class="text-sm text-gray-500 mb-1">March 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">First Product Launch</h3>
<p class="text-gray-600">Released our flagship product with positive feedback.</p>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="flex items-start relative z-10">
<div class="flex-shrink-0 w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center border-4 border-white">
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<div class="ml-4 md:ml-6">
<div class="text-sm text-gray-500 mb-1">June 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">1000+ Users Milestone</h3>
<p class="text-gray-600">Reached our first major milestone worldwide.</p>
</div>
</div>
</div>
</div><template>
<!-- Timeline with Icons -->
<div class="max-w-2xl mx-auto">
<div class="relative">
<!-- Vertical Line -->
<div class="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-300 z-0"></div>
<!-- Timeline Item 1 -->
<div class="flex items-start mb-8 relative z-10">
<div class="flex-shrink-0 w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center border-4 border-white">
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
</svg>
</div>
<div class="ml-4 md:ml-6">
<div class="text-sm text-gray-500 mb-1">January 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Company Founded</h3>
<p class="text-gray-600">Started with a vision to revolutionize web development.</p>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="flex items-start mb-8 relative z-10">
<div class="flex-shrink-0 w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center border-4 border-white">
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<div class="ml-4 md:ml-6">
<div class="text-sm text-gray-500 mb-1">March 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">First Product Launch</h3>
<p class="text-gray-600">Released our flagship product with positive feedback.</p>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="flex items-start relative z-10">
<div class="flex-shrink-0 w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center border-4 border-white">
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<div class="ml-4 md:ml-6">
<div class="text-sm text-gray-500 mb-1">June 2023</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">1000+ Users Milestone</h3>
<p class="text-gray-600">Reached our first major milestone worldwide.</p>
</div>
</div>
</div>
</div>
</template>export default function TimelineWithIcons() {
return (
<div className="max-w-2xl mx-auto">
<div className="relative">
<!-- Vertical Line -->
<div className="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-300 z-0"></div>
<!-- Timeline Item 1 -->
<div className="flex items-start mb-8 relative z-10">
<div className="flex-shrink-0 w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center border-4 border-white">
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
</svg>
</div>
<div className="ml-4 md:ml-6">
<div className="text-sm text-gray-500 mb-1">January 2023</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">Company Founded</h3>
<p className="text-gray-600">Started with a vision to revolutionize web development.</p>
</div>
</div>
<!-- Timeline Item 2 -->
<div className="flex items-start mb-8 relative z-10">
<div className="flex-shrink-0 w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center border-4 border-white">
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<div className="ml-4 md:ml-6">
<div className="text-sm text-gray-500 mb-1">March 2023</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">First Product Launch</h3>
<p className="text-gray-600">Released our flagship product with positive feedback.</p>
</div>
</div>
<!-- Timeline Item 3 -->
<div className="flex items-start relative z-10">
<div className="flex-shrink-0 w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center border-4 border-white">
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<div className="ml-4 md:ml-6">
<div className="text-sm text-gray-500 mb-1">June 2023</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">1000+ Users Milestone</h3>
<p className="text-gray-600">Reached our first major milestone worldwide.</p>
</div>
</div>
</div>
</div>
);
}5. Interactive Progress Timeline
Timeline with progress indicators, status badges, and hover animations for project tracking.
January 15, 2024
Completed
Project Kickoff
Initial planning session with stakeholders and team formation. All objectives met successfully.
February 1, 2024
In Progress
Development Phase
Core feature development and testing. Currently implementing user authentication and dashboard.
65% Complete
March 15, 2024
Upcoming
Testing & QA
Comprehensive testing phase including user acceptance testing and performance optimization.
April 1, 2024
Planned
Production Launch
Final deployment to production environment with full monitoring and support systems.
<!-- Interactive Progress Timeline -->
<div class="max-w-3xl mx-auto">
<div class="relative">
<!-- Timeline Line -->
<div class="absolute left-6 top-0 bottom-0 w-0.5 bg-gray-300 z-0"></div>
<!-- Timeline Item 1 - Completed -->
<div class="flex items-start mb-8 group hover:bg-white/50 rounded-lg p-2 transition-all duration-300 cursor-pointer">
<div class="flex-shrink-0 relative z-10">
<div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center border-4 border-white shadow-lg group-hover:scale-110 transition-transform duration-300">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
</div>
</div>
<div class="ml-4 md:ml-6 flex-grow">
<div class="flex items-center justify-between mb-2">
<div class="text-sm text-gray-500">January 15, 2024</div>
<span class="px-2 py-1 text-xs font-semibold bg-green-100 text-green-800 rounded-full">Completed</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600 transition-colors">Project Kickoff</h3>
<p class="text-gray-600 mb-3">Initial planning session with stakeholders and team formation. All objectives met successfully.</p>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div>
</div>
</div>
</div>
<!-- Timeline Item 2 - In Progress -->
<div class="flex items-start mb-8 group hover:bg-white/50 rounded-lg p-2 transition-all duration-300 cursor-pointer">
<div class="flex-shrink-0 relative z-10">
<div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center border-4 border-white shadow-lg group-hover:scale-110 transition-transform duration-300">
<svg class="w-6 h-6 text-white animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
</svg>
</div>
</div>
<div class="ml-4 md:ml-6 flex-grow">
<div class="flex items-center justify-between mb-2">
<div class="text-sm text-gray-500">February 1, 2024</div>
<span class="px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-800 rounded-full">In Progress</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600 transition-colors">Development Phase</h3>
<p class="text-gray-600 mb-3">Core feature development and testing. Currently implementing user authentication and dashboard.</p>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-500 h-2 rounded-full transition-all duration-300" style="width: 65%"></div>
</div>
<div class="text-xs text-gray-500 mt-1">65% Complete</div>
</div>
</div>
<!-- Timeline Item 3 - Upcoming -->
<div class="flex items-start mb-8 group hover:bg-white/50 rounded-lg p-2 transition-all duration-300 cursor-pointer">
<div class="flex-shrink-0 relative z-10">
<div class="w-12 h-12 bg-gray-400 rounded-full flex items-center justify-center border-4 border-white shadow-lg group-hover:scale-110 transition-transform duration-300">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
</div>
<div class="ml-4 md:ml-6 flex-grow">
<div class="flex items-center justify-between mb-2">
<div class="text-sm text-gray-500">March 15, 2024</div>
<span class="px-2 py-1 text-xs font-semibold bg-gray-100 text-gray-600 rounded-full">Upcoming</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600 transition-colors">Testing & QA</h3>
<p class="text-gray-600 mb-3">Comprehensive testing phase including user acceptance testing and performance optimization.</p>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-gray-400 h-2 rounded-full" style="width: 0%"></div>
</div>
</div>
</div>
<!-- Timeline Item 4 - Planned -->
<div class="flex items-start group hover:bg-white/50 rounded-lg p-2 transition-all duration-300 cursor-pointer">
<div class="flex-shrink-0 relative z-10">
<div class="w-12 h-12 bg-purple-200 rounded-full flex items-center justify-center border-4 border-white shadow-lg group-hover:scale-110 transition-transform duration-300">
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
</svg>
</div>
</div>
<div class="ml-4 md:ml-6 flex-grow">
<div class="flex items-center justify-between mb-2">
<div class="text-sm text-gray-500">April 1, 2024</div>
<span class="px-2 py-1 text-xs font-semibold bg-purple-100 text-purple-600 rounded-full">Planned</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600 transition-colors">Production Launch</h3>
<p class="text-gray-600 mb-3">Final deployment to production environment with full monitoring and support systems.</p>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-purple-200 h-2 rounded-full" style="width: 0%"></div>
</div>
</div>
</div>
</div>
</div><template>
<!-- Interactive Progress Timeline -->
<div class="max-w-3xl mx-auto">
<div class="relative">
<!-- Timeline Line -->
<div class="absolute left-6 top-0 bottom-0 w-0.5 bg-gray-300 z-0"></div>
<!-- Timeline Item 1 - Completed -->
<div class="flex items-start mb-8 group hover:bg-white/50 rounded-lg p-2 transition-all duration-300 cursor-pointer">
<div class="flex-shrink-0 relative z-10">
<div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center border-4 border-white shadow-lg group-hover:scale-110 transition-transform duration-300">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
</div>
</div>
<div class="ml-4 md:ml-6 flex-grow">
<div class="flex items-center justify-between mb-2">
<div class="text-sm text-gray-500">January 15, 2024</div>
<span class="px-2 py-1 text-xs font-semibold bg-green-100 text-green-800 rounded-full">Completed</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600 transition-colors">Project Kickoff</h3>
<p class="text-gray-600 mb-3">Initial planning session with stakeholders and team formation. All objectives met successfully.</p>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div>
</div>
</div>
</div>
<!-- Timeline Item 2 - In Progress -->
<div class="flex items-start mb-8 group hover:bg-white/50 rounded-lg p-2 transition-all duration-300 cursor-pointer">
<div class="flex-shrink-0 relative z-10">
<div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center border-4 border-white shadow-lg group-hover:scale-110 transition-transform duration-300">
<svg class="w-6 h-6 text-white animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
</svg>
</div>
</div>
<div class="ml-4 md:ml-6 flex-grow">
<div class="flex items-center justify-between mb-2">
<div class="text-sm text-gray-500">February 1, 2024</div>
<span class="px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-800 rounded-full">In Progress</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600 transition-colors">Development Phase</h3>
<p class="text-gray-600 mb-3">Core feature development and testing. Currently implementing user authentication and dashboard.</p>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-500 h-2 rounded-full transition-all duration-300" style="width: 65%"></div>
</div>
<div class="text-xs text-gray-500 mt-1">65% Complete</div>
</div>
</div>
<!-- Timeline Item 3 - Upcoming -->
<div class="flex items-start mb-8 group hover:bg-white/50 rounded-lg p-2 transition-all duration-300 cursor-pointer">
<div class="flex-shrink-0 relative z-10">
<div class="w-12 h-12 bg-gray-400 rounded-full flex items-center justify-center border-4 border-white shadow-lg group-hover:scale-110 transition-transform duration-300">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
</div>
<div class="ml-4 md:ml-6 flex-grow">
<div class="flex items-center justify-between mb-2">
<div class="text-sm text-gray-500">March 15, 2024</div>
<span class="px-2 py-1 text-xs font-semibold bg-gray-100 text-gray-600 rounded-full">Upcoming</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600 transition-colors">Testing & QA</h3>
<p class="text-gray-600 mb-3">Comprehensive testing phase including user acceptance testing and performance optimization.</p>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-gray-400 h-2 rounded-full" style="width: 0%"></div>
</div>
</div>
</div>
<!-- Timeline Item 4 - Planned -->
<div class="flex items-start group hover:bg-white/50 rounded-lg p-2 transition-all duration-300 cursor-pointer">
<div class="flex-shrink-0 relative z-10">
<div class="w-12 h-12 bg-purple-200 rounded-full flex items-center justify-center border-4 border-white shadow-lg group-hover:scale-110 transition-transform duration-300">
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
</svg>
</div>
</div>
<div class="ml-4 md:ml-6 flex-grow">
<div class="flex items-center justify-between mb-2">
<div class="text-sm text-gray-500">April 1, 2024</div>
<span class="px-2 py-1 text-xs font-semibold bg-purple-100 text-purple-600 rounded-full">Planned</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600 transition-colors">Production Launch</h3>
<p class="text-gray-600 mb-3">Final deployment to production environment with full monitoring and support systems.</p>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-purple-200 h-2 rounded-full" style="width: 0%"></div>
</div>
</div>
</div>
</div>
</div>
</template>export default function InteractiveProgressTimeline() {
return (
<div className="max-w-3xl mx-auto">
<div className="relative">
<!-- Timeline Line -->
<div className="absolute left-6 top-0 bottom-0 w-0.5 bg-gray-300 z-0"></div>
<!-- Timeline Item 1 - Completed -->
<div className="flex items-start mb-8 group hover:bg-white/50 rounded-lg p-2 transition-all duration-300 cursor-pointer">
<div className="flex-shrink-0 relative z-10">
<div className="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center border-4 border-white shadow-lg group-hover:scale-110 transition-transform duration-300">
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
</div>
</div>
<div className="ml-4 md:ml-6 flex-grow">
<div className="flex items-center justify-between mb-2">
<div className="text-sm text-gray-500">January 15, 2024</div>
<span className="px-2 py-1 text-xs font-semibold bg-green-100 text-green-800 rounded-full">Completed</span>
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600 transition-colors">Project Kickoff</h3>
<p className="text-gray-600 mb-3">Initial planning session with stakeholders and team formation. All objectives met successfully.</p>
<div className="w-full bg-gray-200 rounded-full h-2">
<div className="bg-green-500 h-2 rounded-full" style="width: 100%"></div>
</div>
</div>
</div>
<!-- Timeline Item 2 - In Progress -->
<div className="flex items-start mb-8 group hover:bg-white/50 rounded-lg p-2 transition-all duration-300 cursor-pointer">
<div className="flex-shrink-0 relative z-10">
<div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center border-4 border-white shadow-lg group-hover:scale-110 transition-transform duration-300">
<svg className="w-6 h-6 text-white animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
</svg>
</div>
</div>
<div className="ml-4 md:ml-6 flex-grow">
<div className="flex items-center justify-between mb-2">
<div className="text-sm text-gray-500">February 1, 2024</div>
<span className="px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-800 rounded-full">In Progress</span>
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600 transition-colors">Development Phase</h3>
<p className="text-gray-600 mb-3">Core feature development and testing. Currently implementing user authentication and dashboard.</p>
<div className="w-full bg-gray-200 rounded-full h-2">
<div className="bg-blue-500 h-2 rounded-full transition-all duration-300" style="width: 65%"></div>
</div>
<div className="text-xs text-gray-500 mt-1">65% Complete</div>
</div>
</div>
<!-- Timeline Item 3 - Upcoming -->
<div className="flex items-start mb-8 group hover:bg-white/50 rounded-lg p-2 transition-all duration-300 cursor-pointer">
<div className="flex-shrink-0 relative z-10">
<div className="w-12 h-12 bg-gray-400 rounded-full flex items-center justify-center border-4 border-white shadow-lg group-hover:scale-110 transition-transform duration-300">
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
</div>
<div className="ml-4 md:ml-6 flex-grow">
<div className="flex items-center justify-between mb-2">
<div className="text-sm text-gray-500">March 15, 2024</div>
<span className="px-2 py-1 text-xs font-semibold bg-gray-100 text-gray-600 rounded-full">Upcoming</span>
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600 transition-colors">Testing & QA</h3>
<p className="text-gray-600 mb-3">Comprehensive testing phase including user acceptance testing and performance optimization.</p>
<div className="w-full bg-gray-200 rounded-full h-2">
<div className="bg-gray-400 h-2 rounded-full" style="width: 0%"></div>
</div>
</div>
</div>
<!-- Timeline Item 4 - Planned -->
<div className="flex items-start group hover:bg-white/50 rounded-lg p-2 transition-all duration-300 cursor-pointer">
<div className="flex-shrink-0 relative z-10">
<div className="w-12 h-12 bg-purple-200 rounded-full flex items-center justify-center border-4 border-white shadow-lg group-hover:scale-110 transition-transform duration-300">
<svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
</svg>
</div>
</div>
<div className="ml-4 md:ml-6 flex-grow">
<div className="flex items-center justify-between mb-2">
<div className="text-sm text-gray-500">April 1, 2024</div>
<span className="px-2 py-1 text-xs font-semibold bg-purple-100 text-purple-600 rounded-full">Planned</span>
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600 transition-colors">Production Launch</h3>
<p className="text-gray-600 mb-3">Final deployment to production environment with full monitoring and support systems.</p>
<div className="w-full bg-gray-200 rounded-full h-2">
<div className="bg-purple-200 h-2 rounded-full" style="width: 0%"></div>
</div>
</div>
</div>
</div>
</div>
);
}