Componenti Pulsante Segui Componente pulsante Segui

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.

Anteprima

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.

Aperto

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.

Aperto

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.

Aperto