Composant de chronologie
Un composant de chronologie réactif avec des éléments de conception 3D, une palette de couleurs de terre et une prise en charge du mode sombre. Convient aux portefeuilles.
HTML Code
<div class="container mx-auto py-12">
<div class="relative wrap overflow-hidden p-10 h-full">
<div class="border-2-2 absolute top-0 left-1/2 w-0.5 h-full bg-gray-700 transform -translate-x-1/2 dark:bg-gray-300"></div>
<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="order-1 w-5/12 px-1 py-4 text-right">
<p class="mb-3 text-base text-gray-900 dark:text-white">10 May 2023</p>
<h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Alpha</h4>
<p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
Lorem ipsum dolor sit amet messy, consectetur adipiscing elit. Sed do eiusmod tempor messy incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="mb-8 flex justify-between items-center w-full right-timeline">
<div class="order-1 w-5/12"></div>
<div class="order-1 w-5/12 px-1 py-4 text-left">
<p class="mb-3 text-base text-gray-900 dark:text-white">15 June 2023</p>
<h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Beta</h4>
<p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<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="order-1 w-5/12 px-1 py-4 text-right">
<p class="mb-3 text-base text-gray-900 dark:text-white">10 May 2023</p>
<h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Alpha</h4>
<p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="mb-8 flex justify-between items-center w-full right-timeline">
<div class="order-1 w-5/12"></div>
<div class="order-1 w-5/12 px-1 py-4 text-left">
<p class="mb-3 text-base text-gray-900 dark:text-white">15 June 2023</p>
<h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Beta</h4>
<p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>Composants associés
Chronologie des médias sociaux en niveaux de gris
Un composant de chronologie de médias sociaux réactif et prêt pour le mode sombre, construit avec Tailwind CSS. Il présente un schéma de couleurs strict en niveaux de gris et des cartes postales complexes avec des avatars d’utilisateurs, du contenu de publication (texte et images), des statistiques d’engagement et des boutons d’action. Conçu pour les interfaces de réseaux sociaux avec plusieurs éléments interactifs sur chaque publication. La conception prend en charge les arrière-plans sombres pour réduire la fatigue oculaire. Aucun JavaScript n’est utilisé.
Composant Chronologie des médias sociaux
Un composant de chronologie simple et réactif pour les médias sociaux, conçu selon les principes de Material Design. Il utilise des tons de terre et inclut la prise en charge du mode sombre. Chaque élément de la chronologie affiche un avatar utilisateur, un nom, le titre d’une publication et une image de remplacement, typique des flux de médias sociaux.
Chronologie rétro
Un composant de chronologie simple, rétro/vintage utilisant Tailwind CSS, conçu pour les portfolios. Il dispose d’une mise en page réactive et d’un support en mode sombre, utilisant des couleurs complémentaires.