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
Composant Suivre le bouton
Un bouton « Suivre » épuré et minimaliste conçu avec une palette de couleurs rétro/vintage, adapté à un tableau de bord ou à une page de profil. Il dispose d’un état de survol interactif et d’une prise en charge du mode sombre, incarnant les principes de la typographie suisse et internationale.
Composant Suivre le bouton
Un composant de bouton de suivi/désabonnement réactif adapté aux sites Web d’événements et de conférences, avec des transitions de dégradé, la prise en charge du mode sombre et une couleur d’accentuation vive. Il comprend un effet de survol subtil et modifie le texte et l’arrière-plan au clic (simulé).
Composant Suivre le bouton - Monospace/Style de développeur
Un composant de bouton de suivi complexe et interactif conçu pour les sites Web d’actualités/journalisme, avec une esthétique monospace/développeur avec des couleurs aux tons de bijou et une réactivité totale, y compris la prise en charge du mode sombre.