Componente Perfiles de usuario
Un componente de perfil de usuario simple y receptivo con microinteracciones con un esquema de color triádico, adecuado para sitios web comerciales o corporativos.
Código HTML
<div class="max-w-sm mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
<img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/seed/profile/400/200" alt="Profile Background">
<div class="flex items-center mt-4">
<img class="w-16 h-16 rounded-full border-4 border-blue-500 dark:border-yellow-500" src="https://randomuser.me/api/portraits/men/70.jpg" alt="User Avatar">
<div class="ml-4">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
</div>
</div>
<p class="mt-2 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="mt-4 flex justify-between">
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-yellow-500 dark:hover:bg-yellow-600 dark:focus:ring-yellow-400 transition-colors">View Profile</button>
<button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg dark:bg-gray-700 dark:text-white hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">Message</button>
</div>
</div>Componentes relacionados
Componente Perfiles de usuario
Un componente de perfiles de usuario responsivo con un estilo de diseño glassmorphism, con soporte para temas oscuros y uso de Tailwind CSS.
Componente Perfiles de usuario
Un componente de perfiles de usuario diseñado en un estilo brutalista utilizando Tailwind CSS, con un esquema de color monocromático y que proporciona una interfaz para las redes sociales. Es compatible con el modo oscuro y responde.
Componente Perfiles de usuario
Un componente de perfiles de usuario diseñado en un estilo brutalista con un esquema de color triádico, con una complejidad moderada adecuada para el consumo de blog/contenido, y un diseño responsivo con soporte para temas oscuros.