Composant Profils utilisateur - Thème Forêt Sombre
Un composant de profil utilisateur simple et réactif conçu pour les plateformes immobilières, avec une palette de couleurs vert forêt foncé et une prise en charge complète du mode sombre.
HTML Code
<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>Composants associés
Composant Profils utilisateur
Un composant de profils d’utilisateur conçu dans un style brutaliste avec une palette de couleurs triadique, avec une complexité modérée adaptée à la consommation de blog/contenu, et une conception réactive avec prise en charge du thème sombre.
Composant Profils utilisateur
Un composant de profils d’utilisateurs réactif pour les organisations à but non lucratif/caritatives, avec un design luxueux/haut de gamme avec des tons bleus professionnels, la prise en charge du mode sombre et une typographie sophistiquée.
Composant Profils utilisateur
Un composant de profil d’utilisateur réactif avec une esthétique de conception 3D et une palette de couleurs de terre, adapté aux sites Web de voyage et de tourisme. Inclut la prise en charge du mode sombre.