Componente Profili utente
Un componente di profili utente reattivo per una dashboard, con un tema pastello in modalità scura, costruito con Tailwind CSS. Mostra gli avatar degli utenti, i nomi, i ruoli e una breve descrizione, con un pulsante Segui. Il design si adatta alle diverse dimensioni dello schermo e supporta la modalità oscura in base alle preferenze del sistema.
Codice HTML
<div class="min-h-screen bg-gray-900 p-4 dark:bg-gray-900">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- User Profile Card 1 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-purple-300 dark:text-purple-300">John Doe</h2>
<p class="text-blue-300 dark:text-blue-300">Software Engineer</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Passionate about clean code and scalable architectures.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-purple-600 text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700">Follow</button>
</div>
</div>
<!-- User Profile Card 2 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-green-300 dark:text-green-300">Jane Smith</h2>
<p class="text-teal-300 dark:text-teal-300">UI/UX Designer</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Creating intuitive and beautiful user experiences.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-green-600 text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 dark:bg-green-600 dark:hover:bg-green-700">Follow</button>
</div>
</div>
<!-- User Profile Card 3 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-blue-300 dark:text-blue-300">Peter Jones</h2>
<p class="text-cyan-300 dark:text-cyan-300">Data Scientist</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Uncovering insights from complex datasets.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700">Follow</button>
</div>
</div>
<!-- User Profile Card 4 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/65.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-yellow-300 dark:text-yellow-300">Sarah Brown</h2>
<p class="text-orange-300 dark:text-orange-300">Product Manager</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Bringing innovative products to life.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-yellow-600 text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50 dark:bg-yellow-600 dark:hover:bg-yellow-700">Follow</button>
</div>
</div>
<!-- User Profile Card 5 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-red-300 dark:text-red-300">Michael Green</h2>
<p class="text-pink-300 dark:text-pink-300">DevOps Engineer</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Automating deployments and managing infrastructure.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-red-600 text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 dark:bg-red-600 dark:hover:bg-red-700">Follow</button>
</div>
</div>
<!-- User Profile Card 6 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-indigo-300 dark:text-indigo-300">Emily White</h2>
<p class="text-violet-300 dark:text-violet-300">Marketing Specialist</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Crafting engaging campaigns and analyzing market trends.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-indigo-600 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 dark:bg-indigo-600 dark:hover:bg-indigo-700">Follow</button>
</div>
</div>
</div>
</div>Componenti correlati
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 neumorfici
Un componente di profili utente complesso e reattivo con uno stile di design neumorfico e una combinazione di colori oceano/blu, adatto per siti Web aziendali/aziendali. Include il supporto per la modalità oscura.
Componente dei profili utente in scala di grigi Art Déco
Un componente di profili utente reattivo con un design geometrico in scala di grigi Art Déco, adatto per bacheche di lavoro o piattaforme di carriera, incluso il supporto della modalità scura.