Componente di layout della funzione di e-commerce di Glassmorphism
Componente di layout della funzione di e-commerce di Glassmorphism
Codice HTML
<div class="container mx-auto px-4 py-8 dark:bg-gray-900">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg">
<img src="https://picsum.photos/400/300" alt="Feature Image 1" class="rounded-lg mb-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Feature Title 1</h3>
<p class="text-gray-600 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>
<!-- Feature 2 -->
<div class="bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg">
<img src="https://picsum.photos/400/300" alt="Feature Image 2" class="rounded-lg mb-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Feature Title 2</h3>
<p class="text-gray-600 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!-- Feature 3 -->
<div class="bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg">
<img src="https://picsum.photos/400/300" alt="Feature Image 3" class="rounded-lg mb-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Feature Title 3</h3>
<p class="text-gray-600 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</div>Componenti correlati
Componente Layout dashboard
Un layout di dashboard reattivo con un'estetica Material Design, che include una barra laterale, un'intestazione e un'area di contenuto principale. Supporta la modalità oscura e utilizza colori complementari per un aspetto equilibrato. La complessità è moderata con funzionalità di tipo interattivo ottenute esclusivamente con le classi CSS e Tailwind.
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.
Componente del layout del dashboard per la consegna di cibo
Un layout complesso e reattivo del dashboard per la consegna di cibo con un'interfaccia utente scura e una combinazione di colori di caramelle/dolci, con una barra laterale, un'intestazione, un'area di contenuto principale e più elementi interattivi per un'applicazione di cibo/ristorante. Include il supporto per la modalità oscura.