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
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
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 de profils d’utilisateur Neumorphism avec des couleurs vives
Composant de profils d’utilisateur Neumorphism avec des couleurs vives pour les sites Web d’entreprise/d’entreprise, conception réactive avec prise en charge du thème sombre.