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 de redes sociales receptivo con soporte de modo oscuro para sitios web comerciales, con un esquema de color triádico.
Componente de Componentes Sociales
Un componente de cartera diseñado en modo oscuro con una combinación de colores monocromática. Muestra trabajos o productos con un diseño simple.
Componente de Componentes Sociales
Componente de componentes sociales retro / vintage con esquema de color monocromático y complejidad simple, diseñado para blogs / contenido, con soporte para temas oscuros.