Componente de diseño de cuadrícula
Un componente de diseño de cuadrícula responsivo que sigue los principios de Material Design, con efectos de sombra y compatibilidad con el modo oscuro, utilizando Tailwind CSS.
Código HTML
<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>Componentes relacionados
Componente de diseño de cuadrícula 7
Un componente de diseño de cuadrícula receptivo diseñado en estilo brutalismo con Tailwind CSS, con soporte para temas oscuros e imágenes de marcador de posición aleatorio.
Monospace/Developer - Componente de diseño de cuadrícula de música/audio
Un componente de diseño de cuadrícula simple y receptivo para plataformas de música/audio, diseñado con una estética monoespaciada/de desarrollador que utiliza neutros cálidos. Incluye soporte para modo oscuro.
Diseño de materiales Diseño de cuadrícula
Un componente de diseño de cuadrícula receptivo con estilo Material Design, que incluye efectos de sombra y compatibilidad con el modo oscuro.