Timeline Component
A simple responsive timeline component designed in a skeuomorphic style with a grayscale color scheme, suitable for business/corporate websites. It features a dark theme support and uses Tailwind CSS for styling.
HTML Code
<div class="max-w-4xl mx-auto p-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Our Journey</h2>
<div class="border-l-2 border-gray-300 dark:border-gray-600">
<div class="flex flex-start mb-4">
<div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full" />
</div>
<div class="ml-4 flex flex-col justify-center">
<div class="text-xs text-gray-500 dark:text-gray-400">2023-01-01</div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Launched our first product</h3>
<p class="text-gray-600 dark:text-gray-400">We successfully launched our first product to the market, marking a significant milestone for our company.</p>
</div>
</div>
<div class="flex flex-start mb-4">
<div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full" />
</div>
<div class="ml-4 flex flex-col justify-center">
<div class="text-xs text-gray-500 dark:text-gray-400">2023-06-15</div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Expanded our services</h3>
<p class="text-gray-600 dark:text-gray-400">We expanded our service offerings to better meet the needs of our clients and enhance our market presence.</p>
</div>
</div>
<div class="flex flex-start mb-4">
<div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full" />
</div>
<div class="ml-4 flex flex-col justify-center">
<div class="text-xs text-gray-500 dark:text-gray-400">2023-12-01</div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Achieved 1000 clients</h3>
<p class="text-gray-600 dark:text-gray-400">We reached a significant achievement of acquiring our 1000th client, showcasing our growth and success.</p>
</div>
</div>
</div>
</div>Related Components
Social Media Timeline Component
A simple, responsive timeline component for social media, designed with Material Design principles. It uses earth tones and includes dark mode support. Each timeline item displays a user avatar, name, a post title, and a placeholder image, typical for social media feeds.
Timeline Component
A responsive timeline component with a 3D design style, using a monochromatic color scheme, designed to showcase work or products in a portfolio. It includes multiple interactive elements and supports a dark theme.
Timeline Component
A responsive timeline component with Glassmorphism design, complementary color scheme, and dark theme support, suitable for business websites. It features frosted glass-like translucent elements with blur effects.