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
Composant de profils d’utilisateur avec un design brutal, une palette de couleurs monochromatique et une complexité simple à des fins de médias sociaux.
Composant Profils utilisateur
Il s’agit d’un composant de profil utilisateur simple et réactif pour le commerce électronique avec des micro-interactions, une palette de couleurs complémentaire, une prise en charge du mode sombre et pas de JavaScript.
Composant Profils utilisateur
Glassmorphism Composant de profil utilisateur avec palette de couleurs monochromatique et complexité simple.