Composant Suivre le bouton
Un composant de bouton « Suivre » complexe et réactif avec des dégradés et des transitions de couleurs sourdes, conçu pour les plateformes immobilières. Inclut la prise en charge du mode sombre et utilise le HTML sémantique.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center">
<div class="max-w-xs w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden transform transition-all duration-300 hover:shadow-xl">
<div class="relative h-32 bg-gradient-to-br from-gray-300 via-gray-400 to-gray-500 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 flex items-end p-4">
<img class="absolute inset-0 w-full h-full object-cover opacity-70" src="https://picsum.photos/300/200?random=1" alt="Background image">
<div class="relative z-10 w-20 h-20 rounded-full border-4 border-white dark:border-gray-800 shadow-lg content-center flex-shrink-0">
<img class="w-full h-full rounded-full object-cover" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Agent Avatar">
</div>
</div>
<div class="p-4 text-center">
<h3 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100 mb-1">Sarah Johnson</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Real Estate Agent</p>
<div class="flex justify-center space-x-2 text-gray-700 dark:text-gray-300 mb-4">
<div class="flex items-center text-sm">
<svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
<span>New York, USA</span>
</div>
<div class="flex items-center text-sm">
<svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
<span>5 Years Exp.</span>
</div>
</div>
<button class="w-full px-6 py-3 rounded-full font-medium text-white shadow-md
bg-gradient-to-r from-gray-500 to-gray-600
dark:from-gray-600 dark:to-gray-700
hover:from-gray-600 hover:to-gray-700
dark:hover:from-gray-700 dark:hover:to-gray-800
transition-all duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:shadow-lg
focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75
">
Follow Agent
</button>
</div>
</div>
</div>Composants associés
3D_Analogous_Simple_Follow_Button_Component
Un bouton « Suivre » simple et réactif avec une esthétique 3D et une palette de couleurs analogue, adapté à un site de portfolio, prenant en charge les modes clair et sombre.
Bouton de suivi avec micro-interactions
Composant de bouton de suivi réactif avec prise en charge du thème sombre et micro-interactions, conçu pour les applications de médias sociaux utilisant Tailwind CSS. Comprend une palette de couleurs monochromatiques et des éléments interactifs complexes.
Composant de bouton de suivi neumorphe
Un composant de bouton de suivi complexe, de style neumorphe, avec des tons crépuscules/chauds, conçu pour les plateformes immobilières. Il présente un design réactif et une prise en charge du mode sombre, donnant l’impression que les éléments s’extrudent de l’arrière-plan à l’aide d’ombres subtiles.