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.
HTML Code
<div class="container mx-auto p-4">
<h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Material Design Grid Layout</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/200/300" alt="Random Image" class="w-full h-48 object-cover" />
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/200/300?2" alt="Random Image" class="w-full h-48 object-cover" />
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/200/300?3" alt="Random Image" class="w-full h-48 object-cover" />
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/200/300?4" alt="Random Image" class="w-full h-48 object-cover" />
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 4</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/200/300?5" alt="Random Image" class="w-full h-48 object-cover" />
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 5</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/200/300?6" alt="Random Image" class="w-full h-48 object-cover" />
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 6</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
</div>
</div>
</div>
</div>
<!-- Tailwind CSS styles for dark mode support -->
<style>
@media (prefers-color-scheme: dark) {
.dark .bg-white { background-color: #1f2937; /* Gray-800 */ }
.dark .text-gray-700 { color: #e5e7eb; /* Gray-200 */ }
.dark .text-gray-600 { color: #d1d5db; /* Gray-400 */ }
}
</style>Composants associés
Composant de disposition de grille 29
Un composant de mise en page de grille réactif conçu dans un style brutaliste avec un contraste élevé et des mises en page inhabituelles, prenant en charge le mode sombre avec Tailwind CSS.
Disposition simple de la grille brutaliste
Un composant de mise en page de grille brutaliste simple et réactif avec prise en charge des tons de terre et du mode sombre, adapté aux sites Web d’entreprise.
Composant de disposition de grille de neumorphisme
Composant de disposition de grille de neumorphisme