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
Monospace/Developer - Composant de disposition de grille musicale/audio
Un composant de mise en page de grille simple et réactif pour les plates-formes musicales/audio, conçu avec une esthétique monospace/développeur utilisant des neutres chauds. Inclut la prise en charge du mode sombre.
Composant de disposition de grille - Finance/Banque
Un composant de mise en page de grille réactif pour les applications financières/bancaires, doté d’une esthétique matérielle épurée avec des neutres chauds et une prise en charge du mode sombre.
Mise en page de la grille de commerce électronique rétro/vintage
Un composant de mise en page de grille réactif, soutenu par un thème sombre, avec un design rétro/vintage et pastel, destiné à l’affichage de produits de commerce électronique. Utilise Tailwind CSS et inclut des images fictives et des avatars.