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.
Código HTML
<div class="flex flex-col items-center justify-center bg-gray-900 p-6 rounded-lg shadow-lg dark:bg-gray-800">
<h1 class="text-4xl text-white font-bold mb-4">User Profiles</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
<div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-600">
<img src="https://picsum.photos/200/300?random=1" alt="User Image" class="w-full h-40 object-cover rounded-t-lg">
<div class="p-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full mx-auto mb-2">
<h2 class="text-2xl text-white font-semibold text-center">John Doe</h2>
<p class="text-gray-400 text-center mb-2">@johndoe</p>
<p class="text-gray-300 text-center">Web Developer<br>Based in San Francisco</p>
<button class="mt-4 w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-500">Follow</button>
</div>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-600">
<img src="https://picsum.photos/200/300?random=2" alt="User Image" class="w-full h-40 object-cover rounded-t-lg">
<div class="p-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-16 h-16 rounded-full mx-auto mb-2">
<h2 class="text-2xl text-white font-semibold text-center">Jane Smith</h2>
<p class="text-gray-400 text-center mb-2">@janesmith</p>
<p class="text-gray-300 text-center">Graphic Designer<br>Based in New York</p>
<button class="mt-4 w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-500">Follow</button>
</div>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-600">
<img src="https://picsum.photos/200/300?random=3" alt="User Image" class="w-full h-40 object-cover rounded-t-lg">
<div class="p-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-16 h-16 rounded-full mx-auto mb-2">
<h2 class="text-2xl text-white font-semibold text-center">Alex Johnson</h2>
<p class="text-gray-400 text-center mb-2">@alexjohnson</p>
<p class="text-gray-300 text-center">Content Creator<br>Based in Austin</p>
<button class="mt-4 w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-500">Follow</button>
</div>
</div>
</div>
</div>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
Componente de perfiles de usuario con diseño brutalista, combinación de colores monocromática y complejidad simple para fines de redes sociales.