Componente Timeline
Un componente timeline minimalista progettato per il consumo di blog e contenuti, con colori della terra e supporto per la modalità scura utilizzando Tailwind CSS.
Codice HTML
<div class="container mx-auto p-6">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Timeline</h1>
<div class="relative">
<div class="border-l border-gray-300 dark:border-gray-700 ml-6">
<div class="mb-6">
<div class="flex items-center">
<div class="bg-green-500 rounded-full w-6 h-6 mr-4">
<img src="https://picsum.photos/seed/1/100" alt="Event Image" class="rounded-full" />
</div>
<div>
<h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">Description of the event that took place. It was a significant moment.</p>
<span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-02-14</span>
</div>
</div>
</div>
<div class="mb-6">
<div class="flex items-center">
<div class="bg-green-500 rounded-full w-6 h-6 mr-4">
<img src="https://picsum.photos/seed/2/100" alt="Event Image" class="rounded-full" />
</div>
<div>
<h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">Another description of an important event that happened.</p>
<span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-03-01</span>
</div>
</div>
</div>
<div class="mb-6">
<div class="flex items-center">
<div class="bg-green-500 rounded-full w-6 h-6 mr-4">
<img src="https://picsum.photos/seed/3/100" alt="Event Image" class="rounded-full" />
</div>
<div>
<h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">A brief overview of an event that marked a milestone.</p>
<span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-04-10</span>
</div>
</div>
</div>
<div class="mb-6">
<div class="flex items-center">
<div class="bg-green-500 rounded-full w-6 h-6 mr-4">
<img src="https://picsum.photos/seed/4/100" alt="Event Image" class="rounded-full" />
</div>
<div>
<h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 4</h2>
<p class="text-gray-600 dark:text-gray-400">Final event description summarizing the timeline.</p>
<span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-05-15</span>
</div>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente Timeline
Un componente della timeline reattivo con un design minimalista/piatto per l'e-commerce, che supporta la modalità oscura con una combinazione di colori analoga e più elementi interattivi.
Componente della linea temporale del neumorfismo
Un componente Timeline reattivo con stile Neumorfismo utilizzando Tailwind CSS, con supporto per la modalità scura.
Componente Timeline
Un componente della timeline reattivo con elementi di progettazione 3D, combinazione di colori dei toni della terra e supporto per la modalità scura. Adatto per portafogli.