Composant de chronologie
Un composant de chronologie réactif avec des éléments de conception 3D, une palette de couleurs triadiques, une complexité modérée et une prise en charge du thème sombre, conçu avec Tailwind CSS pour les sites Web de portfolio.
HTML Code
<div class="container mx-auto px-4 py-8">
<h2 class="text-3xl font-bold text-center mb-8 dark:text-white">My Timeline</h2>
<div class="relative wrap overflow-hidden p-10 h-full">
<div class="border-2-2 absolute border op dark:border-gray-700 h-full border" style="right: 50%; border: 2px solid #000; border-radius: 1%;"></div>
<div class="border-2-2 absolute border op dark:border-gray-700 h-full border" style="left: 50%; border: 2px solid #000; border-radius: 1%;"></div>
<!-- Timeline Item -->
<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-blue-500 shadow-xl w-8 h-8 rounded-full">
<h1 class="mx-auto font-semibold text-lg text-white">1</h1>
</div>
<div class="order-1 bg-blue-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-blue-700">
<h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Project Alpha</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Exercitationem veniam quidem molestiae ducimus sed.</p>
</div>
</div>
<!-- Timeline Item -->
<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-yellow-500 shadow-xl w-8 h-8 rounded-full">
<h1 class="mx-auto font-semibold text-lg text-white">2</h1>
</div>
<div class="order-1 bg-yellow-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-yellow-700">
<h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Project Beta</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Exercitationem veniam quidem molestiae ducimus sed.</p>
</div>
</div>
<!-- Timeline Item -->
<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-red-500 shadow-xl w-8 h-8 rounded-full">
<h1 class="mx-auto font-semibold text-lg text-white">3</h1>
</div>
<div class="order-1 bg-red-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-red-700">
<h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Project Gamma</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Exercitationem veniam quidem molestiae ducimus sed.</p>
</div>
</div>
</div>
</div>Composants associés
Composant de chronologie
Un composant de chronologie réactif avec une palette de couleurs triadique, une conception axée sur la micro-interaction pour les sites Web d’entreprise, prenant en charge les modes clair et sombre.
Composant de chronologie
Composant de chronologie avec conception 3D, effets réactifs et prise en charge du thème sombre
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.