Composant Profils utilisateur
Un composant de profils d’utilisateurs conçu dans un style brutaliste à l’aide de Tailwind CSS, avec une palette de couleurs monochromatiques et fournissant une interface pour les réseaux sociaux. Il prend en charge le mode sombre et est réactif.
HTML Code
<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>Composants associés
Composant Profils utilisateur
Un composant de profil utilisateur simple et artistique conçu pour les sites Web de voyage/tourisme, avec des textures aquarelle douces, une palette de couleurs dégradée arc-en-ciel, une réactivité et la prise en charge du mode sombre.
Composant Profils utilisateur
Un composant de profil utilisateur réactif avec des micro-interactions, une palette de couleurs en niveaux de gris, une mise en page complexe, une prise en charge du mode sombre et des images/avatars aléatoires.
Composant Profils utilisateur
Composant de profils d’utilisateur avec conception Neumorphism, effets réactifs et prise en charge du thème sombre.