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
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.
Composant de mise en page de grille
Un composant de mise en page de grille réactif suivant les principes de conception matérielle, avec des effets d’ombre et la prise en charge du mode sombre, à l’aide de Tailwind CSS.
Composant 7 de la disposition de la grille
Un composant de mise en page de grille réactif conçu dans le style Brutalism avec Tailwind CSS, avec la prise en charge des thèmes sombres et des images de remplacement aléatoires.