Componente de diseño de cuadrícula
Un componente de diseño de cuadrícula minimalista con un diseño simple y limpio con efectos receptivos y soporte para temas oscuros. Utiliza imágenes de marcador de posición y avatares de picsum.photos y randomuser.me.
Código HTML
<div class="container mx-auto p-4">
<h2 class="text-center text-2xl font-bold mb-4">Minimalist Grid Layout</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/150" alt="Placeholder Image" class="rounded mb-2">
<h3 class="text-lg font-semibold">Card Title 1</h3>
<p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/151" alt="Placeholder Image" class="rounded mb-2">
<h3 class="text-lg font-semibold">Card Title 2</h3>
<p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/152" alt="Placeholder Image" class="rounded mb-2">
<h3 class="text-lg font-semibold">Card Title 3</h3>
<p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/153" alt="Placeholder Image" class="rounded mb-2">
<h3 class="text-lg font-semibold">Card Title 4</h3>
<p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/154" alt="Placeholder Image" class="rounded mb-2">
<h3 class="text-lg font-semibold">Card Title 5</h3>
<p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/155" alt="Placeholder Image" class="rounded mb-2">
<h3 class="text-lg font-semibold">Card Title 6</h3>
<p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
</div>
</div>
</div>
<style>
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
.bg-white { background-color: #1a202c; }
.text-gray-700 { color: #edf2f7; }
}
</style>Componentes relacionados
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.
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.
Cuadrícula de CRM de Cyberpunk
Un componente de diseño de cuadrícula receptivo para CRM/Business Tools con una estética de neón ciberpunk-futurista, con fondos oscuros y cálidos colores de acento al atardecer. Incluye elementos interactivos y soporte para el modo oscuro.