Composant de disposition de grille Glassmorphism
Composant de mise en page de grille Glassmorphism avec prise en charge du thème réactif et sombre
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-8 text-center">Glassmorphism Grid Layout</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Card 1 -->
<div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum1/400/300" alt="Placeholder Image">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 1</h3>
<p class="text-gray-700 dark:text-gray-300 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<!-- Card 2 -->
<div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum2/400/300" alt="Placeholder Image">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 2</h3>
<p class="text-gray-700 dark:text-gray-300 text-base">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<!-- Card 3 -->
<div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum3/400/300" alt="Placeholder Image">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 3</h3>
<p class="text-gray-700 dark:text-gray-300 text-base">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<!-- Card 4 -->
<div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum4/400/300" alt="Placeholder Image">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 4</h3>
<p class="text-gray-700 dark:text-gray-300 text-base">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<!-- Card 5 -->
<div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum5/400/300" alt="Placeholder Image">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 5</h3>
<p class="text-gray-700 dark:text-gray-300 text-base">Sed ut perspiciatis unde omnis iste natus error sit voluptatem doloremque laudantium.</p>
</div>
</div>
<!-- Card 6 -->
<div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum6/400/300" alt="Placeholder Image">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 6</h3>
<p class="text-gray-700 dark:text-gray-300 text-base">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant de mise en page de grille
Un composant de mise en page de grille minimaliste pour le commerce électronique avec une palette de couleurs triadique et la prise en charge du mode sombre, conçu pour les expériences d’achat en ligne.
Composant de mise en page de grille
Un composant de mise en page de grille réactif avec un design rétro/vintage, avec une esthétique nostalgique des années 80/90. Le composant comprend des images d’espace réservé et des avatars avec prise en charge du mode sombre.
Composant de mise en page de grille
Un composant de mise en page de grille minimaliste avec un design simple et épuré avec des effets réactifs et la prise en charge du thème sombre. Utilise des images de substitution et des avatars de picsum.photos et randomuser.me.