Componente de Componentes Sociales
Un componente simple de redes sociales que usa Tailwind CSS y está diseñado con los principios de Material Design. Cuenta con colores vibrantes y compatibilidad con el modo oscuro, lo que lo hace adecuado para interfaces de redes sociales.
Código HTML
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Social Media Image">
<div class="p-4">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div>
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
<p class="text-gray-600 dark:text-gray-300">@johndoe</p>
</div>
</div>
<p class="mt-2 text-gray-600 dark:text-gray-300">This is a sample post demonstrating the vibrant and energetic design suitable for social media engagement.</p>
<div class="mt-4 flex justify-between">
<button class="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">Like</button>
<button class="px-4 py-2 text-white bg-green-500 rounded hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700">Comment</button>
</div>
</div>
</div>Componentes relacionados
Componente de Componentes Sociales
Un componente social brutalista, complejo y centrado en el comercio electrónico con un esquema de color análogo, implementado con Tailwind CSS. Es sensible y admite el modo oscuro.
Componente de Componentes Sociales
Componentes sociales Componente con un diseño esqueuomórfico, combinación de colores complementaria y complejidad moderada. Está diseñado para sitios web comerciales/corporativos, es responsivo y admite temas oscuros.
Componente de Componentes Sociales
Un componente social de estilo bruto que muestra elementos de portafolio con una combinación de colores triádica, perfecta para exhibir trabajos o productos.