Componente de Componentes Sociales
Un componente social para un salpicadero con un diseño brutalista y pastel. Muestra un perfil de usuario con un nombre, título y avatar, e incluye botones para acciones sociales como seguir, enviar mensajes y compartir. El componente responde y es compatible con el modo oscuro.
Código HTML
<div class="bg-pink-200 dark:bg-purple-900 p-6 rounded-lg shadow-xl border-2 border-black">
<div class="flex items-center">
<img class="w-16 h-16 rounded-full border-2 border-black" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
<div class="ml-4">
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100">John Doe</h2>
<p class="text-gray-700 dark:text-gray-300">Lead brutalist designer</p>
</div>
</div>
<div class="mt-6 grid grid-cols-3 gap-4">
<button class="bg-blue-400 hover:bg-blue-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white">Follow</button>
<button class="bg-green-400 hover:bg-green-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-green-600 dark:hover:bg-green-700 dark:text-white">Message</button>
<button class="bg-yellow-400 hover:bg-yellow-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:text-white">Share</button>
</div>
</div>Componentes relacionados
Componente de Componentes Sociales
Un componente social simple diseñado con un estilo skeuomórfico utilizando colores vibrantes para un sitio comercial profesional, diseño receptivo con soporte para modo oscuro.
Social_Components_Component
Un componente social de comercio electrónico receptivo e interactivo con una estética de diseño 3D, combinación de colores complementaria y compatibilidad con el modo oscuro. Cuenta con reseñas/testimonios de usuarios, calificaciones de estrellas y una llamada a la acción "compartir".
Componente de Componentes Sociales
Un componente de redes sociales responsivo simple con animaciones atractivas y un tema oscuro, usando Tailwind CSS.