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
Timeline Component
A simple retro/vintage timeline component designed to showcase work or products with a nostalgic 80s/90s aesthetic, using an analogous color scheme for dark mode support.
Cyberpunk_Timeline_Dating_Social_Component
A responsive timeline component with a cyberpunk aesthetic for dating and social platforms. Features dark backgrounds, warm neon accents, and adaptive layout for desktop, tablet, and mobile, with full dark mode support.
Glassmorphism Timeline Component
A responsive Timeline Component featuring glassmorphism style with a triadic color scheme. It includes frosted glass-like translucent elements with blur effects, suitable for blog and content consumption, with dark mode support.