Componente de diseño de cuadrícula
Un componente de diseño de cuadrícula receptivo con un diseño retro / vintage, con una estética nostálgica de los años 80 / 90. El componente incluye imágenes de marcador de posición y avatares con soporte para el modo oscuro.
Código HTML
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-6 bg-gray-100 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
<img src="https://picsum.photos/300/200?random=1" alt="Placeholder Image 1" class="w-full h-36 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Retro 1</h2>
<p class="text-gray-600 dark:text-gray-400">This is a retro-themed description for the first item in the grid.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-sm text-gray-700 dark:text-gray-300">User 1</span>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
<img src="https://picsum.photos/300/200?random=2" alt="Placeholder Image 2" class="w-full h-36 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Retro 2</h2>
<p class="text-gray-600 dark:text-gray-400">This is a retro-themed description for the second item in the grid.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-sm text-gray-700 dark:text-gray-300">User 2</span>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
<img src="https://picsum.photos/300/200?random=3" alt="Placeholder Image 3" class="w-full h-36 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Retro 3</h2>
<p class="text-gray-600 dark:text-gray-400">This is a retro-themed description for the third item in the grid.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-sm text-gray-700 dark:text-gray-300">User 3</span>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
<img src="https://picsum.photos/300/200?random=4" alt="Placeholder Image 4" class="w-full h-36 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Retro 4</h2>
<p class="text-gray-600 dark:text-gray-400">This is a retro-themed description for the fourth item in the grid.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-sm text-gray-700 dark:text-gray-300">User 4</span>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de diseño de cuadrícula - Finanzas/Banca
Un componente de diseño de cuadrícula receptivo para aplicaciones financieras/bancarias, con una estética de diseño de materiales limpia con neutros cálidos y compatibilidad con modo oscuro.
Neumorfismo Cuadrícula del panel de control
Componente de tablero de diseño de cuadrícula de neumorfismo con esquema de color complementario
Componente de diseño de cuadrícula 3D para portafolio
Un componente de diseño de cuadrícula complejo, receptivo y de estilo 3D para portafolios que usan colores complementarios, con soporte para modo oscuro e imágenes de picsum.photos.