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
Diseño minimalista de cuadrícula azul océano
Un componente de diseño de cuadrícula minimalista y receptivo para marcas de moda / belleza, con tonos azul océano y compatibilidad con el modo oscuro.
Travel_Booking_Grid_Layout_Component
Un componente de diseño de cuadrícula complejo y receptivo para un sitio web de reserva de viajes con un diseño corporativo/profesional, combinación de colores análoga y compatibilidad con el modo oscuro. Cuenta con tarjetas de destino, entrada de búsqueda y una barra lateral.
Componente de diseño de cuadrícula de entretenimiento
Un diseño de cuadrícula limpio y minimalista inspirado en la tipografía suiza/internacional para plataformas de entretenimiento y medios de comunicación. Cuenta con un esquema de color triádico, capacidad de respuesta y compatibilidad con el modo oscuro.