Componente de línea de tiempo
Un componente de línea de tiempo receptivo para paneles, con microinteracciones y una combinación de colores pastel, con soporte para temas oscuros. Utiliza Tailwind CSS para el estilo e incluye imágenes de marcador de posición de picsum.photos y avatares de randomuser.me.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-8 text-center">Dashboard Timeline</h1>
<div class="relative max-w-2xl mx-auto">
<!-- Vertical line -->
<div class="absolute left-1/2 transform -translate-x-1/2 w-1 bg-pastel-200 dark:bg-pastel-700 h-full"></div>
<!-- Timeline Item 1 -->
<div class="mb-8 flex justify-between items-center w-full right-timeline">
<div class="order-1 w-5/12"></div>
<div class="z-20 flex items-center order-1 bg-pastel-400 dark:bg-pastel-600 shadow-xl w-8 h-8 rounded-full"></div>
<div class="order-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl w-5/12 px-6 py-4 transition-transform duration-300 ease-in-out hover:scale-105">
<h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">New User Registration</h3>
<p class="text-sm leading-snug tracking-wide text-gray-600 dark:text-gray-300 text-opacity-100">John Doe just registered an account. Welcome him aboard!</p>
<img src="https://picsum.photos/seed/user1/400/200" alt="Placeholder Image" class="mt-4 rounded-md w-full h-32 object-cover">
</div>
</div>
<!-- Timeline Item 2 -->
<div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
<div class="order-1 w-5/12"></div>
<div class="z-20 flex items-center order-1 bg-pastel-400 dark:bg-pastel-600 shadow-xl w-8 h-8 rounded-full"></div>
<div class="order-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl w-5/12 px-6 py-4 transition-transform duration-300 ease-in-out hover:scale-105">
<h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Sales Report Generated</h3>
<p class="text-sm leading-snug tracking-wide text-gray-600 dark:text-gray-300 text-opacity-100">Monthly sales report for Q3 is now available for review.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-700 dark:text-gray-300 text-sm">Report by: Jane Smith</span>
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="mb-8 flex justify-between items-center w-full right-timeline">
<div class="order-1 w-5/12"></div>
<div class="z-20 flex items-center order-1 bg-pastel-400 dark:bg-pastel-600 shadow-xl w-8 h-8 rounded-full"></div>
<div class="order-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl w-5/12 px-6 py-4 transition-transform duration-300 ease-in-out hover:scale-105">
<h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Server Maintenance</h3>
<p class="text-sm leading-snug tracking-wide text-gray-600 dark:text-gray-300 text-opacity-100">Scheduled server maintenance completed successfully.</p>
<img src="https://picsum.photos/seed/server/400/200" alt="Placeholder Image" class="mt-4 rounded-md w-full h-32 object-cover">
</div>
</div>
<!-- Timeline Item 4 -->
<div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
<div class="order-1 w-5/12"></div>
<div class="z-20 flex items-center order-1 bg-pastel-400 dark:bg-pastel-600 shadow-xl w-8 h-8 rounded-full"></div>
<div class="order-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl w-5/12 px-6 py-4 transition-transform duration-300 ease-in-out hover:scale-105">
<h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">New Feature Release</h3>
<p class="text-sm leading-snug tracking-wide text-gray-600 dark:text-gray-300 text-opacity-100">Exciting new analytics features have been rolled out!</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/women/50.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-700 dark:text-gray-300 text-sm">Announced by: Sarah Lee</span>
</div>
</div>
</div>
</div>
</div>
<style>
/* Custom Pastel Colors */
.bg-pastel-200 { background-color: #e2e8f0; } /* Light Blue-Gray */
.dark\:bg-pastel-700 { background-color: #4a5568; } /* Dark Blue-Gray */
.bg-pastel-400 { background-color: #9f7aea; } /* Medium Purple */
.dark\:bg-pastel-600 { background-color: #6b46c1; } /* Darker Purple */
/* Responsive adjustments for timeline */
@media (max-width: 768px) {
.right-timeline, .left-timeline {
justify-content: flex-end;
}
.right-timeline .order-1, .left-timeline .order-1 {
width: 10/12;
}
.right-timeline .z-20, .left-timeline .z-20 {
transform: translateX(50%);
}
.right-timeline,
.left-timeline {
left: 0;
}
.left-timeline {
flex-direction: row;
}
/* Adjust the vertical line for mobile */
.absolute.left-1\/2 {
left: 50%; /* Keep it centered for simplicity, or adjust for responsiveness */
}
}
</style>Componentes relacionados
Componente de línea de tiempo
Un componente de línea de tiempo responsivo con elementos de diseño 3D, combinación de colores triádica, complejidad moderada y compatibilidad con temas oscuros, creado con Tailwind CSS para sitios web de cartera.
Componente de la línea de tiempo del neumorfismo
Un componente de línea de tiempo receptivo diseñado con neumorfismo usando Tailwind CSS, con soporte para modo oscuro.
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.