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
Vibrante cuadrícula de atención médica inspirada en el papel
Un componente de diseño de cuadrícula simple, inspirado en papel / impresión con colores vibrantes, diseñado para aplicaciones médicas / de atención médica. Es totalmente responsivo, incluye soporte para el modo oscuro y utiliza HTML semántico.
Monospace_Developer_Food_Grid_Layout
Un componente de diseño de cuadrícula simple con temática monoespaciada para sitios web de alimentos / restaurantes, con un diseño limpio y un esquema de color monocromático con soporte para modo oscuro.
Skeuomorfismo Diseño de cuadrícula vibrante
Componente de diseño de cuadrícula receptivo con soporte de modo oscuro, diseño de skeuomorfismo, colores vibrantes, complejidad moderada, adecuado para carteras.