Componente de línea de tiempo
Un componente de línea de tiempo responsivo simple diseñado en un estilo esqueuomórfico con un esquema de color en escala de grises, adecuado para sitios web comerciales / corporativos. Cuenta con un soporte de tema oscuro y utiliza Tailwind CSS para el estilo.
Código HTML
<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>Componentes relacionados
Componente de línea de tiempo
Un componente de línea de tiempo responsivo con soporte para temas oscuros, construido con Tailwind CSS. Muestra una serie de eventos con fechas, títulos y descripciones, adecuados para un panel.
Componente de línea de tiempo
Componente de línea de tiempo receptivo con diseño esqueuomórfico, combinación de colores análoga, complejidad moderada para sitios web de blogs/contenido con soporte de tema oscuro. No se necesita JavaScript, usa Tailwind CSS con soporte para modo oscuro. Se utilizan imágenes de picsum.photos y avatares de randomuser.me.
Componente de línea de tiempo
Un componente de línea de tiempo de diseño minimalista/plano para mostrar trabajos o productos en un portafolio, diseñado con capacidad de respuesta y compatibilidad con modo oscuro utilizando Tailwind CSS.