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.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 bg-opacity-20 backdrop-blur-md rounded-lg shadow-lg p-6 md:w-1/3 w-full">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-24 h-24 border-4 border-white dark:border-gray-700 mb-4 shadow-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">Web Developer</p>
<ul class="mt-4 space-y-2 text-center">
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-envelope"></i> [email protected]</li>
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-map-marker-alt"></i> New York, USA</li>
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-birthday-cake"></i> January 1, 1990</li>
</ul>
</div>
</div>
<div class="bg-white dark:bg-gray-800 bg-opacity-20 backdrop-blur-md rounded-lg shadow-lg p-6 md:w-1/3 w-full mt-6">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="rounded-full w-24 h-24 border-4 border-white dark:border-gray-700 mb-4 shadow-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h2>
<p class="text-gray-600 dark:text-gray-400">Graphic Designer</p>
<ul class="mt-4 space-y-2 text-center">
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-envelope"></i> [email protected]</li>
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-map-marker-alt"></i> London, UK</li>
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-birthday-cake"></i> March 5, 1992</li>
</ul>
</div>
</div>
</div>
<!-- Add Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">Componentes relacionados
Componente Perfiles de usuario
Un componente de perfiles de usuario responsivo para un tablero, con un tema pastel de modo oscuro, construido con Tailwind CSS. Muestra avatares de usuario, nombres, roles y una breve descripción, con un botón de seguimiento. El diseño se adapta a diferentes tamaños de pantalla y admite el modo oscuro según las preferencias del sistema.
Componente Perfiles de usuario
Un componente de perfil de usuario responsivo que utiliza Tailwind CSS, con influencias de Material Design y un esquema de color monocromático. Admite el modo oscuro y muestra información del usuario, estadísticas y actividad reciente.
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.