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
Diseño de cuadrícula brutalista
Un componente de diseño de cuadrícula receptivo con un estilo de diseño brutalista con alto contraste, diseños inusuales y compatibilidad con temas oscuros.
Componente de diseño de cuadrícula
Un componente de diseño de cuadrícula receptivo para interfaces de redes sociales diseñado con un estilo esqueuomórfico, con colores triádicos, múltiples elementos interactivos y compatibilidad con temas oscuros.
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.