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.
Código HTML
<div class="min-h-screen bg-gray-900 p-4 dark:bg-gray-900">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- User Profile Card 1 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-purple-300 dark:text-purple-300">John Doe</h2>
<p class="text-blue-300 dark:text-blue-300">Software Engineer</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Passionate about clean code and scalable architectures.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-purple-600 text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700">Follow</button>
</div>
</div>
<!-- User Profile Card 2 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-green-300 dark:text-green-300">Jane Smith</h2>
<p class="text-teal-300 dark:text-teal-300">UI/UX Designer</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Creating intuitive and beautiful user experiences.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-green-600 text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 dark:bg-green-600 dark:hover:bg-green-700">Follow</button>
</div>
</div>
<!-- User Profile Card 3 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-blue-300 dark:text-blue-300">Peter Jones</h2>
<p class="text-cyan-300 dark:text-cyan-300">Data Scientist</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Uncovering insights from complex datasets.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700">Follow</button>
</div>
</div>
<!-- User Profile Card 4 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/65.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-yellow-300 dark:text-yellow-300">Sarah Brown</h2>
<p class="text-orange-300 dark:text-orange-300">Product Manager</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Bringing innovative products to life.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-yellow-600 text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50 dark:bg-yellow-600 dark:hover:bg-yellow-700">Follow</button>
</div>
</div>
<!-- User Profile Card 5 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-red-300 dark:text-red-300">Michael Green</h2>
<p class="text-pink-300 dark:text-pink-300">DevOps Engineer</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Automating deployments and managing infrastructure.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-red-600 text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 dark:bg-red-600 dark:hover:bg-red-700">Follow</button>
</div>
</div>
<!-- User Profile Card 6 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-indigo-300 dark:text-indigo-300">Emily White</h2>
<p class="text-violet-300 dark:text-violet-300">Marketing Specialist</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Crafting engaging campaigns and analyzing market trends.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-indigo-600 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 dark:bg-indigo-600 dark:hover:bg-indigo-700">Follow</button>
</div>
</div>
</div>
</div>Componentes relacionados
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
Componente de perfiles de usuario con diseño brutalista, combinación de colores monocromática y complejidad simple para fines de redes sociales.
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.