Componente pulsante Segui
Un componente pulsante "Segui" complesso e reattivo con transizioni di colore sfumate e tenui, progettato per le piattaforme immobiliari. Include il supporto per la modalità oscura e utilizza l'HTML semantico.
Codice HTML
<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>
Componenti correlati
Glassmorphism_Music_Follow_Button_Component
Un complesso componente monocromatico glassmorphism follow button progettato per piattaforme musicali e audio, caratterizzato da elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, completamente reattivi e con supporto per la modalità scura.
Componente pulsante Segui
Un complesso componente del pulsante follow progettato con un effetto glassmorphism, utilizzando una combinazione di colori complementari, adatto per applicazioni di e-commerce, caratterizzato da un design reattivo e dal supporto del tema scuro.
Pulsante di follow-follow vibrante 3D
Un semplice componente del pulsante Segui ispirato al 3D con colori vivaci per i siti Web aziendali. È reattivo e include il supporto per il tema scuro utilizzando solo HTML e Tailwind CSS.