Disposition de la grille de conception matérielle
Composant de mise en page de grille réactif avec le style Material Design, y compris les effets d’ombre et la prise en charge du mode sombre.
HTML Code
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum1/400/300" alt="Placeholder Image 1">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 1</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 1. It provides details about the content.</p>
</div>
</div>
<!-- Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum2/400/300" alt="Placeholder Image 2">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 2</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 2. It provides details about the content.</p>
</div>
</div>
<!-- Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum3/400/300" alt="Placeholder Image 3">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 3</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 3. It provides details about the content.</p>
</div>
</div>
<!-- Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum4/400/300" alt="Placeholder Image 4">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 4</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 4. It provides details about the content.</p>
</div>
</div>
<!-- Card 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum5/400/300" alt="Placeholder Image 5">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 5</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 5. It provides details about the content.</p>
</div>
</div>
<!-- Card 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum6/400/300" alt="Placeholder Image 6">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 6</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 6. It provides details about the content.</p>
</div>
</div>
</div>
</div>Composants associés
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.
Composant de disposition de grille de skeuomorphisme
Composant de mise en page de grille Skeuomorphism avec effets réactifs et prise en charge du thème sombre
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