Componente Perfiles de usuario
Un componente de perfiles de usuario diseñado para un panel de control en modo oscuro con una combinación de colores pastel y características de complejidad moderada.
Código HTML
<div class="bg-gray-900 text-gray-300 p-6 rounded-lg shadow-lg space-y-6">
<h2 class="text-2xl font-bold text-center">User Profiles</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- User Profile Card -->
<div class="bg-gray-800 rounded-lg p-4 transition-transform transform hover:-translate-y-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
<h3 class="text-xl font-semibold text-center">John Doe</h3>
<p class="text-center">Software Developer</p>
<div class="mt-4 flex justify-between">
<button class="bg-pastel-blue-500 text-white py-2 px-4 rounded hover:bg-pastel-blue-700">View Profile</button>
<button class="bg-red-600 text-white py-2 px-4 rounded hover:bg-red-700">Remove</button>
</div>
</div>
<!-- User Profile Card -->
<div class="bg-gray-800 rounded-lg p-4 transition-transform transform hover:-translate-y-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
<h3 class="text-xl font-semibold text-center">Jane Smith</h3>
<p class="text-center">Product Manager</p>
<div class="mt-4 flex justify-between">
<button class="bg-pastel-blue-500 text-white py-2 px-4 rounded hover:bg-pastel-blue-700">View Profile</button>
<button class="bg-red-600 text-white py-2 px-4 rounded hover:bg-red-700">Remove</button>
</div>
</div>
<!-- User Profile Card -->
<div class="bg-gray-800 rounded-lg p-4 transition-transform transform hover:-translate-y-2">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
<h3 class="text-xl font-semibold text-center">Michael Johnson</h3>
<p class="text-center">UX Designer</p>
<div class="mt-4 flex justify-between">
<button class="bg-pastel-blue-500 text-white py-2 px-4 rounded hover:bg-pastel-blue-700">View Profile</button>
<button class="bg-red-600 text-white py-2 px-4 rounded hover:bg-red-700">Remove</button>
</div>
</div>
<!-- Add more user profiles as needed -->
</div>
</div>Componentes relacionados
Componente Perfiles de usuario
Componente de perfiles de usuario con diseño de neumorfismo, efectos responsivos y compatibilidad con temas oscuros.
Componente Perfiles de usuario
Un componente de perfil de usuario simple y receptivo con un estilo artístico/acuarela y un esquema de colores de arco iris degradado, adecuado para plataformas de mercado. Incluye soporte para modo oscuro.
Componente de perfiles de usuario de Glassmorphism (simple)
Un componente de perfil de usuario simple y receptivo con un estilo de diseño de glassmorphism, combinación de colores pastel y compatibilidad con el modo oscuro. Ideal para plataformas de entretenimiento/medios de comunicación.