Composant de chronologie
Un composant de chronologie réactif pour les tableaux de bord, avec des micro-interactions et une palette de couleurs pastel, avec prise en charge du thème sombre. Il utilise Tailwind CSS pour le style et inclut des images de substitution de picsum.photos et des avatars de randomuser.me.
HTML Code
<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>Composants associés
Composant de chronologie skeuomorphe
Un composant de chronologie skeuomorphe avec des effets réactifs et une prise en charge du thème sombre, construit à l’aide de Tailwind CSS. Pas besoin de JavaScript, seulement HTML et CSS.
Composant de chronologie de neumorphisme
Un composant de chronologie réactif stylisé avec Neumorphism à l’aide de Tailwind CSS, avec prise en charge du mode sombre.
Composant de chronologie
Un composant de chronologie minimaliste pour présenter le travail ou les produits d’un portfolio, avec des couleurs vives et une prise en charge du thème sombre.