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 utilisateur réactif pour un tableau de bord, avec un thème pastel en mode sombre, construit avec Tailwind CSS. Il affiche les avatars des utilisateurs, les noms, les rôles et une brève description, avec un bouton de suivi. La conception s’adapte à différentes tailles d’écran et prend en charge le mode sombre en fonction des préférences du système.
Composant Profils utilisateur
Un composant de profils d’utilisateurs réactif et minimaliste pour les médias sociaux, avec plusieurs profils avec des informations sur l’utilisateur, des boutons de suivi et la prise en charge du mode sombre. Utilise un schéma de couleurs analogue.
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.