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 complexe et réactif conçu pour les plateformes éducatives, avec un design épuré et minimaliste axé sur la typographie avec des tons de terre et une prise en charge complète du mode sombre.
Composant de chronologie de médias sociaux - Glassmorphism
Un composant complexe et réactif de chronologie de médias sociaux avec un design glassmorphism avec une palette de couleurs analogue, la prise en charge du mode sombre et des éléments interactifs pour les interfaces de réseaux sociaux.
Composant de chronologie
Un composant de chronologie réactif avec un style de conception 3D, utilisant une palette de couleurs monochromatiques, conçu pour présenter le travail ou les produits d’un portfolio. Il comprend plusieurs éléments interactifs et prend en charge un thème sombre.