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
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
Un composant de chronologie minimaliste pour présenter le travail ou les produits d’un portfolio, avec des couleurs vives et une prise en charge du thème sombre.
Composant de chronologie
Un composant de chronologie réactif avec prise en charge du thème sombre, construit avec Tailwind CSS. Il affiche une série d’événements avec des dates, des titres et des descriptions, adaptés à un tableau de bord.