Componente Timeline
Un semplice componente della timeline reattivo progettato in uno stile scheumorfico con una combinazione di colori in scala di grigi, adatto per siti Web aziendali/aziendali. È dotato di un supporto per il tema scuro e utilizza Tailwind CSS per lo stile.
Codice HTML
<div class="max-w-4xl mx-auto p-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Our Journey</h2>
<div class="border-l-2 border-gray-300 dark:border-gray-600">
<div class="flex flex-start mb-4">
<div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full" />
</div>
<div class="ml-4 flex flex-col justify-center">
<div class="text-xs text-gray-500 dark:text-gray-400">2023-01-01</div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Launched our first product</h3>
<p class="text-gray-600 dark:text-gray-400">We successfully launched our first product to the market, marking a significant milestone for our company.</p>
</div>
</div>
<div class="flex flex-start mb-4">
<div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full" />
</div>
<div class="ml-4 flex flex-col justify-center">
<div class="text-xs text-gray-500 dark:text-gray-400">2023-06-15</div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Expanded our services</h3>
<p class="text-gray-600 dark:text-gray-400">We expanded our service offerings to better meet the needs of our clients and enhance our market presence.</p>
</div>
</div>
<div class="flex flex-start mb-4">
<div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full" />
</div>
<div class="ml-4 flex flex-col justify-center">
<div class="text-xs text-gray-500 dark:text-gray-400">2023-12-01</div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Achieved 1000 clients</h3>
<p class="text-gray-600 dark:text-gray-400">We reached a significant achievement of acquiring our 1000th client, showcasing our growth and success.</p>
</div>
</div>
</div>
</div>Componenti correlati
Cronologia retrò
Un semplice componente della timeline retrò/vintage che utilizza Tailwind CSS, progettato per i portafogli. È dotato di un layout reattivo e supporto per la modalità oscura, utilizzando colori complementari.
Timeline dei social media in scala di grigi
Un componente della timeline dei social media reattivo e pronto per la modalità oscura costruito con Tailwind CSS. È dotato di una rigorosa combinazione di colori in scala di grigi e di complesse cartoline con avatar dell'utente, contenuti dei post (testo e immagini), statistiche di coinvolgimento e pulsanti di azione. Progettato per le interfacce di social networking con più elementi interattivi su ogni post. Il design supporta sfondi scuri per ridurre l'affaticamento degli occhi. Non viene utilizzato alcun JavaScript.
Cronologia dell'azienda retrò/vintage
Componente Timeline reattivo retrò/vintage con supporto per la modalità oscura per siti Web aziendali/aziendali