Componente de Componentes Sociales
Un componente de redes sociales responsivo simple con animaciones atractivas y un tema oscuro, usando Tailwind CSS.
Código HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transition-transform transform hover:scale-105 duration-300 ease-in-out">
<div class="flex items-center space-x-4 mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full">
<div class="flex-1">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">@johndoe</p>
</div>
</div>
<div class="mb-4">
<p class="text-gray-700 dark:text-gray-300">This is a sample post demonstrating social media interactions with engaging microinteractions.</p>
</div>
<div class="flex space-x-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded transition duration-200 ease-in-out">
Like
</button>
<button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded transition duration-200 ease-in-out">
Comment
</button>
<button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded transition duration-200 ease-in-out">
Share
</button>
</div>
</div>Componentes relacionados
Componente de Componentes Sociales
Una tarjeta de redes sociales simple y receptiva para contenido de noticias/periodismo con una estética industrial y una combinación de colores otoñales, que incluye soporte para el modo oscuro.
Social_Components_Documentation_Wiki
Un componente social complejo y responsivo para sitios de documentación/wiki, con degradados de color otoñales y transiciones suaves con soporte para modo oscuro.
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.