Componente Profili utente
Un componente di profili utente reattivo con uno stile di design glassmorphism, con supporto per temi scuri e utilizzo di Tailwind CSS.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 bg-opacity-20 backdrop-blur-md rounded-lg shadow-lg p-6 md:w-1/3 w-full">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-24 h-24 border-4 border-white dark:border-gray-700 mb-4 shadow-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">Web Developer</p>
<ul class="mt-4 space-y-2 text-center">
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-envelope"></i> [email protected]</li>
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-map-marker-alt"></i> New York, USA</li>
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-birthday-cake"></i> January 1, 1990</li>
</ul>
</div>
</div>
<div class="bg-white dark:bg-gray-800 bg-opacity-20 backdrop-blur-md rounded-lg shadow-lg p-6 md:w-1/3 w-full mt-6">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="rounded-full w-24 h-24 border-4 border-white dark:border-gray-700 mb-4 shadow-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h2>
<p class="text-gray-600 dark:text-gray-400">Graphic Designer</p>
<ul class="mt-4 space-y-2 text-center">
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-envelope"></i> [email protected]</li>
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-map-marker-alt"></i> London, UK</li>
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-birthday-cake"></i> March 5, 1992</li>
</ul>
</div>
</div>
</div>
<!-- Add Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">Componenti correlati
Componente Profili utente
Un componente del profilo utente reattivo che utilizza Tailwind CSS, con influenze di Material Design e una combinazione di colori monocromatici. Supporta la modalità oscura e visualizza le informazioni sull'utente, le statistiche e l'attività recente.
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
Un componente dei profili utente progettato in uno stile brutalista con una combinazione di colori triadica, caratterizzata da una complessità moderata adatta al consumo di blog/contenuti e un design reattivo con supporto per temi scuri.