Componenti Componenti di layout Componente Layout 3D

Componente Layout 3D

Un componente di layout di progettazione 3D reattivo con immagini accattivanti, che incorpora profondità attraverso ombre e livelli. Include il supporto per la modalità oscura e presenta immagini e avatar casuali.

Anteprima

Codice HTML

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="max-w-4xl w-full p-6 rounded-lg shadow-2xl bg-white dark:bg-gray-800 transform transition-transform duration-300 hover:scale-105">
        <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">3D Layout Component</h1>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="p-4 bg-gray-50 dark:bg-gray-700 shadow-lg rounded-lg hover:shadow-2xl transition-shadow duration-300">
                <img src="https://picsum.photos/300/200?random=1" alt="Random Image 1" class="w-full h-48 object-cover rounded-lg mb-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 1</h2>
                <p class="text-gray-600 dark:text-gray-300">This is a brief description of the first card item. It's designed to entice the user.</p>
            </div>
            <div class="p-4 bg-gray-50 dark:bg-gray-700 shadow-lg rounded-lg hover:shadow-2xl transition-shadow duration-300">
                <img src="https://picsum.photos/300/200?random=2" alt="Random Image 2" class="w-full h-48 object-cover rounded-lg mb-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 2</h2>
                <p class="text-gray-600 dark:text-gray-300">This is a brief description of the second card item. It's designed to entice the user.</p>
            </div>
        </div>
        <div class="mt-6">
            <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Featured Users</h3>
            <div class="flex flex-wrap">
                <div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-12 h-12 object-cover rounded-full">
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-12 h-12 object-cover rounded-full">
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-12 h-12 object-cover rounded-full">
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User 4" class="w-12 h-12 object-cover rounded-full">
                </div>
            </div>
        </div>
    </div>
</div>

Componenti correlati

Componente di layout del blog minimalista

Componente di layout del blog minimalista con combinazione di colori monocromatica per il consumo di contenuti, reattivo e con supporto per temi scuri.

Aperto

Componente Componenti di layout

Un componente di layout reattivo che mostra le microinterazioni attraverso animazioni coinvolgenti che rispondono alle azioni dell'utente, con supporto per la modalità oscura e l'utilizzo di Tailwind CSS.

Aperto

Layout del cruscotto di Glassmorphism

Un semplice layout di vetromorfismo per un cruscotto con elementi traslucidi simili al vetro smerigliato, con una combinazione di colori pastello e il supporto della modalità scura.

Aperto