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 perfil de usuario receptivo con microinteracciones, combinación de colores en escala de grises, diseño complejo, compatibilidad con modo oscuro e imágenes/avatares aleatorios.
Perfil de usuario Tarjeta simple
Tarjeta de perfil de usuario receptiva con Tailwind CSS, diseño de materiales, combinación de colores de tonos tierra. Compatible con el modo oscuro, no se necesita JS.
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.