Componente Profili utente - Tema Foresta oscura
Un componente del profilo utente semplice e reattivo progettato per le piattaforme immobiliari, caratterizzato da una combinazione di colori verde foresta scuro e supporto completo della modalità scura.
Codice HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
<div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden max-w-sm sm:max-w-md md:max-w-lg w-full transform transition duration-500 hover:scale-105">
<div class="relative h-32 sm:h-48 md:h-56 bg-gradient-to-br from-green-700 to-green-900 dark:from-green-800 dark:to-green-950">
<img class="absolute inset-0 w-full h-full object-cover opacity-30" src="https://picsum.photos/600/350?random=1" alt="Background foliage">
<div class="absolute inset-0 flex items-center justify-center">
<img class="w-24 h-24 sm:w-28 sm:h-28 md:w-32 md:h-32 rounded-full border-4 border-white dark:border-gray-700 shadow-lg object-cover transform translate-y-8 sm:translate-y-12 md:translate-y-16" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile picture">
</div>
</div>
<div class="pt-12 pb-6 px-6 sm:pt-16 sm:pb-8 sm:px-8 text-center">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-white mb-2">Jane Doe</h2>
<p class="text-md sm:text-lg text-green-700 dark:text-green-400 font-semibold mb-4">Real Estate Agent</p>
<p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed mb-6">
Dedicated real estate professional specializing in sustainable properties and luxury homes in the Green Valley area. Passionate about helping clients find their perfect home.
</p>
<div class="flex justify-center space-x-4 mb-6">
<a href="#" class="bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-600 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-1">
View Listings
</a>
<a href="#" class="bg-transparent border border-green-600 dark:border-green-500 text-green-600 dark:text-green-500 hover:bg-green-50 dark:hover:bg-gray-700 font-semibold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
Contact
</a>
</div>
<div class="grid grid-cols-2 gap-4 text-xs sm:text-sm text-gray-700 dark:text-gray-300">
<div class="flex items-center justify-center p-2 rounded-md bg-gray-50 dark:bg-gray-700">
<span class="font-medium text-gray-900 dark:text-white mr-1">150+</span> Properties Sold
</div>
<div class="flex items-center justify-center p-2 rounded-md bg-gray-50 dark:bg-gray-700">
<span class="font-medium text-gray-900 dark:text-white mr-1">12</span> Years Exp.
</div>
</div>
</div>
</div>
</div>
Componenti correlati
Componente Profili utente
Un componente dei profili utente per siti web agricoli/agricoli, caratterizzato da uno stile di design industriale con colori tenui, avatar utente, ruoli e informazioni sulla posizione. È reattivo e supporta la modalità oscura.
Componente Profili utente
Componente profili utente con design brutalista, combinazione di colori monocromatica e complessità semplice per scopi di social media.
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.