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
ArtDecoEducationalGrid
Un composant de mise en page de grille complexe et réactif pour les plateformes éducatives, stylisé avec des motifs géométriques Art déco et de riches couleurs d’automne. Comprend la prise en charge du mode sombre et plusieurs éléments interactifs.
Composant de mise en page de grille cyberpunk
Un composant de mise en page de grille simple et réactif avec une esthétique cyberpunk, adapté aux sites Web d’événements ou de conférences. Présente des arrière-plans sombres, des accents de néon lumineux et une palette de couleurs triadiques. Inclut la 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