Composant de chronologie
Composant de chronologie avec conception 3D, effets réactifs et prise en charge du thème sombre
HTML Code
<div class="container mx-auto p-4">
<h1 class="text-4xl font-bold text-center mb-8 dark:text-white">Timeline</h1>
<div class="relative wrap overflow-hidden p-10 h-full">
<div class="border-2-2 absolute border-opacity-20 border-gray-700 h-full border" style="left: 50%;"></div>
<!-- right timeline -->
<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-gray-800 shadow-xl w-8 h-8 rounded-full"></div>
<div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-gray-700">
<h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Event Title 1</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-300">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</div>
<!-- left timeline -->
<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-gray-800 shadow-xl w-8 h-8 rounded-full"></div>
<div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-gray-700">
<h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Event Title 2</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-300">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</div>
<!-- right timeline -->
<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-gray-800 shadow-xl w-8 h-8 rounded-full"></div>
<div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-gray-700">
<h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Event Title 3</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-300">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</div>
<!-- left timeline -->
<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-gray-800 shadow-xl w-8 h-8 rounded-full"></div>
<div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-gray-700">
<h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Event Title 4</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-300">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</div>
</div>
</div>Composants associés
Composant de chronologie
Un composant de chronologie réactif conçu dans le style Brutalism avec Tailwind CSS, prenant en charge le thème sombre et présentant des images et des avatars de remplacement.
Neon_Glow_Timeline_Agriculture
Un composant de chronologie complexe et réactif avec des effets de néon/lueur et des tons de bijoux, adapté aux sites Web agricoles. Dispose d’éléments visuels riches et d’une prise en charge du mode sombre.
Composant Chronologie de jeu
Un composant de chronologie simple, dynamique et réactif avec un design 3D subtil optimisé pour les sites Web de jeux, avec prise en charge du mode sombre.