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.
Código HTML
<div class="min-h-screen bg-gray-900 text-white p-6">
<h1 class="text-3xl font-bold mb-6">Social Media Feed</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Post Card -->
<div class="bg-gray-800 shadow-lg rounded-lg overflow-hidden transition transform hover:scale-105 duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/post1/400/200" alt="Post Image" />
<div class="p-4">
<div class="flex items-center space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div>
<h2 class="font-semibold text-lg">User Name</h2>
<p class="text-gray-400">@username</p>
</div>
</div>
<p class="mt-2 text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
<div class="mt-4 flex items-center space-x-4">
<button class="px-4 py-2 bg-blue-500 rounded hover:bg-blue-600">Like</button>
<button class="px-4 py-2 bg-green-500 rounded hover:bg-green-600">Comment</button>
<button class="px-4 py-2 bg-red-500 rounded hover:bg-red-600">Share</button>
</div>
</div>
</div>
<!-- Repeat similar post cards for more content -->
<div class="bg-gray-800 shadow-lg rounded-lg overflow-hidden transition transform hover:scale-105 duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/post2/400/200" alt="Post Image" />
<div class="p-4">
<div class="flex items-center space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
<div>
<h2 class="font-semibold text-lg">User Name</h2>
<p class="text-gray-400">@username</p>
</div>
</div>
<p class="mt-2 text-gray-300">Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<div class="mt-4 flex items-center space-x-4">
<button class="px-4 py-2 bg-blue-500 rounded hover:bg-blue-600">Like</button>
<button class="px-4 py-2 bg-green-500 rounded hover:bg-green-600">Comment</button>
<button class="px-4 py-2 bg-red-500 rounded hover:bg-red-600">Share</button>
</div>
</div>
</div>
<div class="bg-gray-800 shadow-lg rounded-lg overflow-hidden transition transform hover:scale-105 duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/post3/400/200" alt="Post Image" />
<div class="p-4">
<div class="flex items-center space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" />
<div>
<h2 class="font-semibold text-lg">User Name</h2>
<p class="text-gray-400">@username</p>
</div>
</div>
<p class="mt-2 text-gray-300">Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis.</p>
<div class="mt-4 flex items-center space-x-4">
<button class="px-4 py-2 bg-blue-500 rounded hover:bg-blue-600">Like</button>
<button class="px-4 py-2 bg-green-500 rounded hover:bg-green-600">Comment</button>
<button class="px-4 py-2 bg-red-500 rounded hover:bg-red-600">Share</button>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Diseño de cuadrícula de juegos Art Deco
Un diseño de cuadrícula de juego responsivo inspirado en el Art Deco con patrones geométricos, colores en escala de grises y elementos interactivos. Diseñado para sitios web e interfaces de juegos, con soporte para modo oscuro.
FinancialGridWithInteractions
Un componente de diseño de cuadrícula receptivo para interfaces financieras/bancarias, con colores de alto contraste y sutiles microinteracciones al pasar el mouse. Admite el modo oscuro y está diseñado para una complejidad moderada.
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.