Componente Timeline retrò/vintage
Un componente della timeline reattivo con design retrò/vintage e supporto per la modalità oscura.
Codice HTML
<div class="container mx-auto px-4 py-8">
<div class="flex flex-col md:flex-row">
<div class="mr-10 w-full md:w-1/2">
<div class="mb-8 flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-purple-500 object-cover">
<div class="text-lg font-bold text-gray-800 dark:text-white">Event 1</div>
</div>
<div class="text-sm text-gray-600 dark:text-gray-300">1985</div>
</div>
<div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
<p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="w-full md:w-1/2">
<div class="mb-8 flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-pink-500 object-cover">
<div class="text-lg font-bold text-gray-800 dark:text-white">Event 2</div>
</div>
<div class="text-sm text-gray-600 dark:text-gray-300">1990</div>
</div>
<div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
<p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row">
<div class="mr-10 w-full md:w-1/2">
<div class="mb-8 flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-green-500 object-cover">
<div class="text-lg font-bold text-gray-800 dark:text-white">Event 3</div>
</div>
<div class="text-sm text-gray-600 dark:text-gray-300">1995</div>
</div>
<div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
<p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div class="w-full md:w-1/2">
<div class="mb-8 flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-yellow-500 object-cover">
<div class="text-lg font-bold text-gray-800 dark:text-white">Event 4</div>
</div>
<div class="text-sm text-gray-600 dark:text-gray-300">2000</div>
</div>
<div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
<p class="text-gray-700 dark:text-gray-300">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>Componenti correlati
Componente della sequenza temporale dei social media
Un componente della timeline semplice e reattivo per i social media, progettato secondo i principi del Material Design. Utilizza i toni della terra e include il supporto per la modalità oscura. Ogni elemento della timeline mostra un avatar utente, un nome, un titolo del post e un'immagine segnaposto, tipici dei feed dei social media.
Componente Timeline
Un componente della timeline reattivo con una combinazione di colori caramelle/dolci, transizioni sfumate e supporto per la modalità scura, adatto per mostrare lavori o prodotti in un portfolio. Presenta più eventi della sequenza temporale.
Cronologia dell'azienda retrò/vintage
Componente Timeline reattivo retrò/vintage con supporto per la modalità oscura per siti Web aziendali/aziendali