Componente Profili utente
Un componente dei profili utente progettato per un dashboard in modalità scura con combinazione di colori pastello e funzionalità di complessità moderata.
Codice HTML
<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>Componenti correlati
Componente Profili utente
Un componente del profilo utente semplice e reattivo per l'e-commerce con microinterazioni, combinazione di colori complementare, supporto per la modalità scura e assenza di JavaScript.
Cyberpunk_User_Profiles_Component
Un componente di profili utente complesso e reattivo con un'estetica cyberpunk e una calda combinazione di colori al tramonto, adatto per siti Web di viaggi/turismo. Dispone di supporto per la modalità oscura, accenti al neon ed elementi interattivi.
Componente Profili utente Glassmorphism (semplice)
Un componente del profilo utente semplice e reattivo con uno stile di progettazione glassmorphism, una combinazione di colori pastello e il supporto della modalità scura. Ideale per piattaforme di intrattenimento/multimediali.