Composant de chronologie rétro/vintage
Un composant de chronologie réactif avec un design rétro/vintage, des couleurs vives et une prise en charge du mode sombre. Convient pour la présentation d’un portfolio.
HTML Code
<div class="container mx-auto px-4 py-8">
<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-blue-400 shadow-xl w-8 h-8 rounded-full"></div>
<div class="order-1 bg-blue-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
<h3 class="mb-3 font-bold text-gray-900 text-xl">Project Title 1</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">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>
<img src="https://picsum.photos/seed/picsum/300/200" alt="Project Image" class="mt-4 rounded-lg">
</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-purple-400 shadow-xl w-8 h-8 rounded-full"></div>
<div class="order-1 bg-purple-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
<h3 class="mb-3 font-bold text-gray-900 text-xl">Project Title 2</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">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>
<img src="https://picsum.photos/seed/picsum/300/200" alt="Project Image" class="mt-4 rounded-lg">
</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-green-400 shadow-xl w-8 h-8 rounded-full"></div>
<div class="order-1 bg-green-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
<h3 class="mb-3 font-bold text-gray-900 text-xl">Project Title 3</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">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>
<img src="https://picsum.photos/seed/picsum/300/200" alt="Project Image" class="mt-4 rounded-lg">
</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-red-400 shadow-xl w-8 h-8 rounded-full"></div>
<div class="order-1 bg-red-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
<h3 class="mb-3 font-bold text-gray-900 text-xl">Project Title 4</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">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>
<img src="https://picsum.photos/seed/picsum/300/200" alt="Project Image" class="mt-4 rounded-lg">
</div>
</div>
</div>
</div>Composants associés
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.
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 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.