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
Watercolor_Artistic_Grid_Layout_Consulting
Un componente de diseño de cuadrícula simple y receptivo para consultoría / servicios, con un diseño artístico / acuarela suave con neutros fríos y soporte de modo oscuro.
Monospace/Developer - Componente de diseño de cuadrícula de música/audio
Un componente de diseño de cuadrícula simple y receptivo para plataformas de música/audio, diseñado con una estética monoespaciada/de desarrollador que utiliza neutros cálidos. Incluye soporte para modo oscuro.
Componente de diseño de cuadrícula
Un componente de diseño de cuadrícula responsivo que sigue los principios de Material Design, con efectos de sombra y compatibilidad con el modo oscuro, utilizando Tailwind CSS.