Composant Profils utilisateur
Composant de profils utilisateur conçu pour un tableau de bord en mode sombre avec une palette de couleurs pastel et des fonctionnalités de complexité modérée.
HTML Code
<div class="bg-gray-900 text-gray-300 p-6 rounded-lg shadow-lg space-y-6">
<h2 class="text-2xl font-bold text-center">User Profiles</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- User Profile Card -->
<div class="bg-gray-800 rounded-lg p-4 transition-transform transform hover:-translate-y-2">
<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-xl font-semibold text-center">John Doe</h3>
<p class="text-center">Software Developer</p>
<div class="mt-4 flex justify-between">
<button class="bg-pastel-blue-500 text-white py-2 px-4 rounded hover:bg-pastel-blue-700">View Profile</button>
<button class="bg-red-600 text-white py-2 px-4 rounded hover:bg-red-700">Remove</button>
</div>
</div>
<!-- User Profile Card -->
<div class="bg-gray-800 rounded-lg p-4 transition-transform transform hover:-translate-y-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
<h3 class="text-xl font-semibold text-center">Jane Smith</h3>
<p class="text-center">Product Manager</p>
<div class="mt-4 flex justify-between">
<button class="bg-pastel-blue-500 text-white py-2 px-4 rounded hover:bg-pastel-blue-700">View Profile</button>
<button class="bg-red-600 text-white py-2 px-4 rounded hover:bg-red-700">Remove</button>
</div>
</div>
<!-- User Profile Card -->
<div class="bg-gray-800 rounded-lg p-4 transition-transform transform hover:-translate-y-2">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
<h3 class="text-xl font-semibold text-center">Michael Johnson</h3>
<p class="text-center">UX Designer</p>
<div class="mt-4 flex justify-between">
<button class="bg-pastel-blue-500 text-white py-2 px-4 rounded hover:bg-pastel-blue-700">View Profile</button>
<button class="bg-red-600 text-white py-2 px-4 rounded hover:bg-red-700">Remove</button>
</div>
</div>
<!-- Add more user profiles as needed -->
</div>
</div>Composants associés
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.
Composant Profils utilisateur
Un composant de profils utilisateur réactif pour un tableau de bord, avec un thème pastel en mode sombre, construit avec Tailwind CSS. Il affiche les avatars des utilisateurs, les noms, les rôles et une brève description, avec un bouton de suivi. La conception s’adapte à différentes tailles d’écran et prend en charge le mode sombre en fonction des préférences du système.
Composant Profils utilisateur
Composant complexe et réactif de profils d’utilisateur conçu pour les sites Web d’alimentation/restaurant, doté d’une interface utilisateur en mode sombre avec des couleurs à contraste élevé. Comprend plusieurs cartes d’utilisateur avec des informations de profil et un appel à l’action.