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.
Código HTML
<div class="container mx-auto p-6">
<h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-8">User Profiles</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Profile 1 -->
<div class="bg-yellow-300 dark:bg-yellow-800 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
<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-2xl font-semibold text-gray-900 dark:text-gray-100">John Doe</h3>
<p class="text-gray-700 dark:text-gray-200">Content Writer</p>
<p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Passionate about writing and sharing knowledge."
</p>
<img src="https://picsum.photos/200/100" alt="Content Image" class="mt-4 rounded-lg shadow-md">
</div>
<!-- Profile 2 -->
<div class="bg-blue-400 dark:bg-blue-900 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
<h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Jane Smith</h3>
<p class="text-gray-700 dark:text-gray-200">Graphic Designer</p>
<p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Creating visuals that tell a story."
</p>
<img src="https://picsum.photos/200/100?grayscale" alt="Content Image" class="mt-4 rounded-lg shadow-md">
</div>
<!-- Profile 3 -->
<div class="bg-green-500 dark:bg-green-900 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
<h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Mike Brown</h3>
<p class="text-gray-700 dark:text-gray-200">Web Developer</p>
<p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Building interactive web experiences."
</p>
<img src="https://picsum.photos/200/100?blur" alt="Content Image" class="mt-4 rounded-lg shadow-md">
</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 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 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.