Componenti Linea temporale Componente della linea temporale di Glassmorphism

Componente della linea temporale di Glassmorphism

Un componente Timeline reattivo con stile glassmorphism con una combinazione di colori triadica. Include elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, adatti per il consumo di blog e contenuti, con supporto per la modalità scura.

Anteprima

Codice HTML

<div class="bg-gray-50 dark:bg-gray-900 flex justify-center py-10">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-xl w-full backdrop-blur-md bg-opacity-30 border border-gray-200 dark:border-gray-700">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Timeline</h2>
        <div class="relative mb-4">
            <div class="flex justify-between items-center mb-4">
                <div class="w-1/2 flex items-center">
                    <div class="h-8 w-8 rounded-full overflow-hidden shadow-lg">
                        <img src="https://picsum.photos/40/40" alt="" class="object-cover">
                    </div>
                    <div class="ml-4">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Event 1</p>
                        <p class="text-xs text-gray-500 dark:text-gray-500">Date 1</p>
                    </div>
                </div>
                <div class="h-1 w-1 bg-gray-300 dark:bg-gray-700"></div>
                <div class="w-1/2 text-right">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of Event 1.</p>
                </div>
            </div>
        </div>
        <div class="relative mb-4">
            <div class="flex justify-between items-center mb-4">
                <div class="w-1/2 flex items-center">
                    <div class="h-8 w-8 rounded-full overflow-hidden shadow-lg">
                        <img src="https://picsum.photos/40/40" alt="" class="object-cover">
                    </div>
                    <div class="ml-4">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Event 2</p>
                        <p class="text-xs text-gray-500 dark:text-gray-500">Date 2</p>
                    </div>
                </div>
                <div class="h-1 w-1 bg-gray-300 dark:bg-gray-700"></div>
                <div class="w-1/2 text-right">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of Event 2.</p>
                </div>
            </div>
        </div>
        <div class="relative mb-4">
            <div class="flex justify-between items-center mb-4">
                <div class="w-1/2 flex items-center">
                    <div class="h-8 w-8 rounded-full overflow-hidden shadow-lg">
                        <img src="https://picsum.photos/40/40" alt="" class="object-cover">
                    </div>
                    <div class="ml-4">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Event 3</p>
                        <p class="text-xs text-gray-500 dark:text-gray-500">Date 3</p>
                    </div>
                </div>
                <div class="h-1 w-1 bg-gray-300 dark:bg-gray-700"></div>
                <div class="w-1/2 text-right">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of Event 3.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Componenti correlati

Componente Timeline

Un componente della timeline reattivo con supporto per la modalità oscura e microinterazioni tramite Tailwind CSS. Non è richiesto alcun JavaScript.

Aperto

Componente Timeline retrò/vintage

Un componente della timeline reattivo con design retrò/vintage e supporto per la modalità oscura.

Aperto

Componente Timeline

Un componente della timeline reattivo con design Glassmorphism, combinazione di colori complementari e supporto per temi scuri, adatto per siti Web aziendali. È dotato di elementi traslucidi simili al vetro smerigliato con effetti di sfocatura.

Aperto