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.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
<div class="relative">
<img class="w-full h-40 object-cover object-center" src="https://picsum.photos/seed/material/400/200" alt="Profile background">
<div class="absolute inset-0 bg-blue-500 opacity-40"></div>
</div>
<div class="relative z-10 -mt-16 flex items-center justify-center">
<img class="w-32 h-32 rounded-full border-4 border-white dark:border-gray-800 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar">
</div>
<div class="text-center p-6">
<h3 class="text-2xl font-semibold text-gray-800 dark:text-white">John Doe</h3>
<p class="text-sm text-blue-600 dark:text-blue-400">@johndoe</p>
<p class="mt-3 text-gray-600 dark:text-gray-300 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="flex justify-around border-t border-gray-200 dark:border-gray-700 py-4">
<div class="text-center">
<p class="text-lg font-semibold text-gray-800 dark:text-white">1.2K</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Followers</p>
</div>
<div class="text-center">
<p class="text-lg font-semibold text-gray-800 dark:text-white">350</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Following</p>
</div>
<div class="text-center">
<p class="text-lg font-semibold text-gray-800 dark:text-white">2.5K</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Likes</p>
</div>
</div>
<div class="p-6 border-t border-gray-200 dark:border-gray-700">
<h4 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Recent Activity</h4>
<ul class="space-y-4">
<li class="flex items-start">
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar">
</div>
<div class="ml-3">
<p class="text-sm text-gray-600 dark:text-gray-400"><span class="font-medium text-gray-800 dark:text-white">Jane Smith</span> liked your post.</p>
<p class="text-xs text-gray-500 dark:text-gray-500">2 hours ago</p>
</div>
</li>
<li class="flex items-start">
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User avatar">
</div>
<div class="ml-3">
<p class="text-sm text-gray-600 dark:text-gray-400"><span class="font-medium text-gray-800 dark:text-white">Peter Jones</span> commented on your photo.</p>
<p class="text-xs text-gray-500 dark:text-gray-500">5 hours ago</p>
</div>
</li>
</ul>
</div>
</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 de perfiles de usuario en escala de grises Art Deco
Un componente de perfiles de usuario receptivo con un diseño geométrico en escala de grises Art Deco, adecuado para bolsas de trabajo o plataformas profesionales, incluido el soporte de modo oscuro.
Componente Perfiles de usuario
Una tarjeta de perfil de usuario simple y receptiva para un mercado, con un diseño orgánico/inspirado en la naturaleza con tonos azules corporativos y soporte para modo oscuro.