Search Components

Follow Button

Button to follow users or topics

Follow Button Component

A complex, responsive 'Follow' button component with gradient and muted color transitions, designed for real estate platforms. Includes dark mode support and uses semantic HTML.

Open Preview

                <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>

Neumorphic Follow Button Component

A complex, interactive neumorphic follow button component with ocean/blue tones, designed for social media interfaces. Includes dark mode support and responsive design.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-blue-100 dark:bg-gray-900 transition-colors duration-300">
  <!-- Neumorphic Follow Card Container -->
  <div class="w-full max-w-sm p-6 rounded-3xl bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark transition-all duration-300">
    <div class="flex flex-col items-center space-y-5">
      <!-- Profile Picture and Name -->
      <div class="relative">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile Picture" class="w-24 h-24 rounded-full object-cover shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition-colors duration-300">
        <span class="absolute bottom-0 right-0 w-6 h-6 bg-green-400 rounded-full border-2 border-blue-100 dark:border-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark"></span>
      </div>
      <div class="text-center">
        <h2 class="text-2xl font-bold text-blue-900 dark:text-blue-100">Jane Doe</h2>
        <p class="text-blue-700 dark:text-blue-300">@janedoe_official</p>
        <p class="text-sm text-blue-600 dark:text-blue-400 mt-2">UI/UX Designer | Building beautiful experiences.</p>
      </div>

      <!-- Stats Section -->
      <div class="grid grid-cols-3 gap-4 w-full mt-4">
        <div class="flex flex-col items-center p-3 rounded-xl bg-blue-50 dark:bg-gray-700 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm transition-colors duration-300">
          <span class="text-blue-900 dark:text-blue-100 font-semibold text-lg">1.2k</span>
          <span class="text-blue-700 dark:text-blue-300 text-xs">Posts</span>
        </div>
        <div class="flex flex-col items-center p-3 rounded-xl bg-blue-50 dark:bg-gray-700 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm transition-colors duration-300">
          <span class="text-blue-900 dark:text-blue-100 font-semibold text-lg">5.8k</span>
          <span class="text-blue-700 dark:text-blue-300 text-xs">Followers</span>
        </div>
        <div class="flex flex-col items-center p-3 rounded-xl bg-blue-50 dark:bg-gray-700 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm transition-colors duration-300">
          <span class="text-blue-900 dark:text-blue-100 font-semibold text-lg">345</span>
          <span class="text-blue-700 dark:text-blue-300 text-xs">Following</span>
        </div>
      </div>

      <!-- Follow Button Group -->
      <div class="flex flex-col md:flex-row gap-4 w-full mt-5">
        <button class="flex-1 py-3 px-6 rounded-full text-lg font-semibold
                       bg-gradient-to-br from-blue-500 to-blue-700 text-white
                       hover:from-blue-600 hover:to-blue-800
                       shadow-neumorphic-blue dark:shadow-neumorphic-dark-blue
                       active:shadow-neumorphic-blue-inset dark:active:shadow-neumorphic-dark-blue-inset
                       transition-all duration-200 ease-in-out
                       focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75
                       dark:text-blue-100">
          Follow
        </button>
        <button class="flex-1 py-3 px-6 rounded-full text-lg font-semibold
                       bg-blue-100 dark:bg-gray-800 text-blue-800 dark:text-blue-200
                       shadow-neumorphic-light dark:shadow-neumorphic-dark
                       hover:bg-blue-200 dark:hover:bg-gray-700
                       active:shadow-neumorphic-light-inset dark:active:shadow-neumorphic-dark-inset
                       transition-all duration-200 ease-in-out
                       focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75
                       dark:hover:text-blue-100">
          Message
        </button>
      </div>

      <!-- Social Icons -->
      <div class="flex justify-center space-x-6 mt-6 w-full">
        <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-50 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-light-inset dark:hover:shadow-neumorphic-dark-inset text-blue-700 dark:text-blue-300 transition-all duration-200 ease-in-out">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M22.23 6.09c.01.59.01 1.18 0 1.77 0 5.43-4.14 11.66-11.67 11.66A11.68 11.68 0 010 19.34c1.61.18 3.23-.27 4.67-1.35.03.02.05.04.08.06A8.25 8.25 0 0010.5 17c-2.45-.4-4.5-1.63-5.97-3.69-.1-.1-.13-.2-.17-.3A.32.32 0 014 12.82c.04.01.07.03.1.04.57.24 1.18.39 1.8.46-1.92-1.3-3.19-3.52-3.19-6.09 0-1.34.37-2.6.98-3.77A8.34 8.34 0 0010.5 9.4c-.05-1.5-.77-2.88-1.95-3.87.5-.1 1-.16 1.5-.16A8.24 8.24 0 0117.84 8.3c1.78-.57 3.42-1.6 4.79-2.9v-.01zM10.5 2C5.83 2 2 5.8 2 10.5c0 3.73 2.45 6.94 5.82 8.37A10.12 10.12 0 0010.5 20c5.79 0 10.5-4.71 10.5-10.5S16.29 2 10.5 2zm6.27 4.28c-.01.02-.02.04-.04.05.02-.01.03-.03.04-.05z"></path>
          </svg>
        </a>
        <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-50 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-light-inset dark:hover:shadow-neumorphic-dark-inset text-blue-700 dark:text-blue-300 transition-all duration-200 ease-in-out">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.502 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-50 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-light-inset dark:hover:shadow-neumorphic-dark-inset text-blue-700 dark:text-blue-300 transition-all duration-200 ease-in-out">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.24 20.3c-.09.02-.19.03-.29.04a2.91 2.91 0 01-1.89-.66c-.34-.23-.62-.51-.83-.84l-.11-.18A.75.75 0 009 18.23l-.1-.08c-.16-.14-.29-.28-.39-.42-.08-.12-.13-.23-.16-.33l-.04-.13a.75.75 0 00-.73-.55h-.01a.75.75 0 00-.63.29c-.06.07-.12.16-.16.27-.05.11-.08.23-.08.36 0 .1.01.2.02.29.02.1.04.2.07.29.03.09.07.17.11.26.04.09.09.18.15.26.06.09.13.17.2.25.07.09.15.16.23.23l.11.1c.09.08.18.15.28.22.1.07.2.13.31.18.06.03.12.06.19.08.08.02.16.03.24.03.05 0 .1-.01.15-.02.05-.01.09-.02.14-.03.04-.01.08-.02.1-.03l.03-.01v-.01a.15.15 0 01.03-.02l.02-.01a.75.75 0 00.32-.98.75.75 0 00-.98-.32l-.02.01-.03.02a.15.15 0 01-.03.02l-.1.05-.18.06-.29-.1c-.1-.04-.19-.09-.28-.15-.08-.07-.16-.15-.22-.24-.07-.1-.13-.2-.17-.3-.05-.1-.08-.2-.11-.3-.02-.08-.03-.17-.03-.26 0-.27.1-.5.3-.65.2-.16.48-.25.75-.25.21 0 .4.07.57.18.17.11.3.26.4.45.06.11.1.23.14.36.03.12.05.25.05.38 0 .22-.04.42-.12.6-.08.19-.19.35-.33.5-.09.09-.19.16-.3.21-.08.03-.16.05-.24.05-.04 0-.08-.01-.12-.02-.04-.01-.07-.02-.1-.04a.75.75 0 00-.9-.57.75.75 0 00-.57.9c.07.16.14.3.24.43.09.12.2.24.32.34.12.1.25.18.39.24.13.06.28.1.42.11.16.02.32.02.49.02.31 0 .6-.04.88-.13.28-.09.53-.22.75-.4.22-.17.4-.39.54-.64.14-.25.24-.53.29-.83.05-.3.07-.63.07-.98 0-.31-.03-.62-.09-.92-.06-.3-.15-.59-.26-.87-.11-.29-.25-.56-.41-.81-.17-.25-.36-.48-.58-.69-.21-.21-.45-.4-.7-.57-.26-.17-.54-.3-.84-.4-.3-.1-.63-.15-.97-.15-.31 0-.6.04-.88.13-.28.09-.53.22-.75.4-.22.17-.4.39-.54.64-.14.25-.24.53-.29.83-.05.3-.07.63-.07.98 0 .31.03.62.09.92.06.3.15.59.26.87.11.29.25.56.41.81.17.25.36.48.58.69.21.21.45.4.7.57.26.17.54.3.84.4.3.1.63.15.97.15zM22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

    <!-- Custom Tailwind CSS Configuration for Neumorphism -->
    <style>
      .shadow-neumorphic-light {
        box-shadow: 6px 6px 12px #98b7e0, -6px -6px 12px #d2f7ff;
      }
      .dark .shadow-neumorphic-dark {
        box-shadow: 6px 6px 12px #181c2d, -6px -6px 12px #444c68;
      }
      .shadow-neumorphic-light-inset {
        box-shadow: inset 4px 4px 8px #98b7e0, inset -4px -4px 8px #d2f7ff;
      }
      .dark .shadow-neumorphic-dark-inset {
        box-shadow: inset 4px 4px 8px #181c2d, inset -4px -4px 8px #444c68;
      }
      .shadow-neumorphic-light-sm {
        box-shadow: 3px 3px 6px #a8cce6, -3px -3px 6px #c4ecff;
      }
      .dark .shadow-neumorphic-dark-sm {
        box-shadow: 3px 3px 6px #1c2134, -3px -3px 6px #3a415b;
      }
      .shadow-neumorphic-blue {
        box-shadow: 8px 8px 16px #0a5697, -8px -8px 16px #1072c4;
      }
      .dark .shadow-neumorphic-dark-blue {
        box-shadow: 8px 8px 16px rgba(0,0,0,0.4), -8px -8px 16px rgba(100,100,100,0.2);
      }
      .shadow-neumorphic-blue-inset {
        box-shadow: inset 5px 5px 10px #0a5697, inset -5px -5px 10px #1072c4;
      }
      .dark .shadow-neumorphic-dark-blue-inset {
        box-shadow: inset 5px 5px 10px rgba(0,0,0,0.6), inset -5px -5px 10px rgba(100,100,100,0.3);
      }
    </style>
  </div>
</div>

Follow Button Component

A complex 'Follow' button component with microinteractions, sepia/brown color scheme, responsive design, and dark mode support, suitable for blog/content platforms.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-stone-900 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-xs w-full bg-amber-100 dark:bg-stone-800 rounded-xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="relative h-24 bg-gradient-to-r from-amber-300 to-amber-500 dark:from-stone-700 dark:to-stone-900">
      <img class="absolute inset-0 w-full h-full object-cover opacity-70" src="https://picsum.photos/400/200?random=1" alt="Background">
    </div>
    <div class="relative px-4 pb-4 -mt-12 text-center">
      <div class="relative inline-block border-4 border-amber-100 dark:border-stone-800 rounded-full overflow-hidden shadow-lg transition-all duration-300 hover:scale-105">
        <img class="w-24 h-24 object-cover object-center" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile Avatar">
      </div>
      <h3 class="mt-3 text-lg font-semibold text-amber-900 dark:text-amber-100">Jane Doe</h3>
      <p class="text-sm text-amber-700 dark:text-stone-300">@janedoe_writes</p>
      <p class="mt-2 text-sm text-amber-800 dark:text-stone-400 leading-snug">Passionate storyteller, weaving tales of adventure and discovery. Follow along for daily insights!</p>

      <div class="mt-5 flex justify-center space-x-3">
        <div class="relative group">
          <button class="peer group relative flex items-center justify-center px-5 py-2 text-base font-medium text-amber-50 dark:text-amber-100 bg-amber-600 dark:bg-stone-700 rounded-full shadow-md hover:bg-amber-700 dark:hover:bg-stone-600 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800 transform transition-all duration-200 ease-in-out active:scale-95 overflow-hidden has-[input:checked]:bg-amber-800 dark:has-[input:checked]:bg-stone-900 has-[input:checked]:ring-amber-700 has-[input:checked]:shadow-inner">
            <input type="checkbox" id="follow-toggle" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer peer" aria-label="Toggle Follow">
            <span class="relative z-10 block transition-transform duration-300 ease-in-out peer-checked:-translate-y-full peer-checked:opacity-0">Follow</span>
            <span class="relative z-10 block absolute top-full left-0 w-full transition-transform duration-300 ease-in-out peer-checked:translate-y-0 peer-checked:opacity-100 opacity-0">Following</span>
            <svg class="absolute z-10 w-5 h-5 left-1/2 top-1/2 -ml-2.5 -mt-2.5 text-amber-50 dark:text-amber-100 transition-all duration-300 ease-in-out transform scale-0 opacity-0 peer-checked:scale-100 peer-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </button>
          <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-2 bg-amber-800 dark:bg-stone-900 text-amber-50 dark:text-stone-200 text-xs rounded-lg shadow-lg opacity-0 pointer-events-none group-hover:opacity-100 group-hover:-translate-y-full transition-all duration-300">
            Click to follow!
            <div class="absolute left-1/2 translate-x-[-50%] top-full w-0 h-0 border-x-4 border-x-transparent border-t-4 border-t-amber-800 dark:border-t-stone-900"></div>
          </div>
        </div>

        <button class="group relative px-4 py-2 text-base text-amber-800 dark:text-amber-100 bg-amber-200 dark:bg-stone-700 rounded-full shadow-md hover:bg-amber-300 dark:hover:bg-stone-600 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800 transform transition-all duration-200 ease-in-out active:scale-95 overflow-hidden">
          <span class="relative z-10">Message</span>
          <div class="absolute inset-0 bg-amber-400 dark:bg-stone-500 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></div>
        </button>
      </div>

      <div class="mt-6 flex justify-around text-center border-t border-amber-200 dark:border-stone-700 pt-4">
        <div>
          <p class="font-semibold text-lg text-amber-900 dark:text-amber-100">2.5K</p>
          <p class="text-xs text-amber-700 dark:text-stone-400">Followers</p>
        </div>
        <div>
          <p class="font-semibold text-lg text-amber-900 dark:text-amber-100">1.2K</p>
          <p class="text-xs text-amber-700 dark:text-stone-400">Following</p>
        </div>
        <div>
          <p class="font-semibold text-lg text-amber-900 dark:text-amber-100">45</p>
          <p class="text-xs text-amber-700 dark:text-stone-400">Posts</p>
        </div>
      </div>
    </div>
  </div>
</div>

Follow Button Component - Monospace/Developer Style

A complex, interactive follow button component designed for news/journalism websites, featuring a monospace/developer aesthetic with jewel-tone colors and full responsiveness, including dark mode support.

Open Preview

                <div class="font-mono antialiased p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-950 text-gray-800 dark:text-gray-200 transition-colors duration-300">
  <div class="max-w-md mx-auto bg-white dark:bg-zinc-900 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-zinc-800">
    <div class="flex items-center p-4 sm:p-6 border-b border-gray-200 dark:border-zinc-800">
      <div class="flex-shrink-0">
        <img class="h-16 w-16 sm:h-20 sm:w-20 rounded-full object-cover border-2 border-emerald-500 dark:border-emerald-600 ring-2 ring-emerald-300 dark:ring-emerald-800" src="https://randomuser.me/api/portraits/women/15.jpg" alt="Developer Profile Picture">
      </div>
      <div class="ml-4 flex-grow">
        <h2 class="text-xl sm:text-2xl font-bold dark:text-emerald-400">@DevJournalist_AI</h2>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1 hidden sm:block">Code Editor & Story Teller</p>
        <div class="flex items-center space-x-2 mt-2">
          <span class="px-2 py-1 bg-emerald-100 dark:bg-emerald-900 text-emerald-700 dark:text-emerald-300 text-xs font-semibold rounded-full">Verified</span>
          <span class="px-2 py-1 bg-violet-100 dark:bg-violet-900 text-violet-700 dark:text-violet-300 text-xs font-semibold rounded-full">News</span>
        </div>
      </div>
      <div class="flex flex-col items-end">
        <button class="follow-button px-5 py-2 sm:px-6 sm:py-2.5 rounded-full text-white font-semibold transition-all duration-300 flex items-center justify-center
          bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-700 dark:hover:bg-emerald-600
          focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-800
          data-[followed='true']:bg-gray-300 data-[followed='true']:hover:bg-gray-400 data-[followed='true']:dark:bg-zinc-700 data-[followed='true']:dark:hover:bg-zinc-600
          data-[followed='true']:text-gray-800 data-[followed='true']:dark:text-gray-200
          data-[followed='true']:focus:ring-gray-200 data-[followed='true']:dark:focus:ring-zinc-600"
          onclick="this.dataset.followed = (this.dataset.followed === 'true' ? 'false' : 'true');
                   this.innerHTML = (this.dataset.followed === 'true' ? '&check; Followed' : '+ Follow');"
          data-followed="false">
          + Follow
        </button>
        <span class="text-xs text-gray-500 dark:text-gray-400 mt-2 text-right" id="follower-count">12.5k Followers</span>
      </div>
    </div>
    <div class="p-4 sm:p-6 text-sm text-gray-700 dark:text-gray-300">
      <p class="mb-2"><span class="text-emerald-500 dark:text-emerald-400">// Latest Commit:</span> Unpacking the future of AI in journalism. Stay updated on cutting-edge tech and ethical reporting.</p>
      <p class="mb-2"><span class="text-violet-500 dark:text-violet-400">// Repository Status:</span> Constantly fetching new insights from the global newsfeed. Expect bug fixes and feature updates on your understanding of complex issues.</p>
      <p class="text-ruby-500 dark:text-ruby-400"><span class="text-red-500 dark:text-red-400">// System Log:</span> Ping us for collabs or data-driven story discussions. Our DMs are open for secure connections.</p>
    </div>
    <div class="p-4 sm:p-6 border-t border-gray-200 dark:border-zinc-800 flex flex-wrap gap-2 text-xs">
      <span class="px-3 py-1 bg-gray-100 dark:bg-zinc-800 rounded-md text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-zinc-700">#TechJournalism</span>
      <span class="px-3 py-1 bg-gray-100 dark:bg-zinc-800 rounded-md text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-zinc-700">#DataScience</span>
      <span class="px-3 py-1 bg-gray-100 dark:bg-zinc-800 rounded-md text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-zinc-700">#AIethics</span>
      <span class="px-3 py-1 bg-gray-100 dark:bg-zinc-800 rounded-md text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-zinc-700">#FutureOfNews</span>
    </div>
  </div>
</div>

Follow Button Component

A responsive 'Follow' button component designed for real estate platforms, featuring a corporate blue color scheme, dark mode support, and a subtle interactive hover effect.

Open Preview

                <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <button class="relative flex items-center justify-center px-6 py-2 overflow-hidden font-semibold text-white transition-all duration-300 ease-in-out bg-blue-600 rounded-lg group shadow-lg dark:bg-blue-700 dark:shadow-blue-900/50 hover:shadow-xl hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900">
    <span class="relative z-10 text-base group-hover:text-white transition-colors duration-200">
      Follow
    </span>
    <svg class="absolute w-0 h-0 transition-all duration-300 ease-in-out transform -translate-x-full opacity-0 group-hover:opacity-100 group-hover:w-6 group-hover:h-6 group-hover:translate-x-0 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
    </svg>
    <span class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-blue-700 to-blue-500 rounded-lg opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100"></span>
  </button>
</div>

Follow Button Component

A responsive follow/unfollow button component suitable for event and conference websites, featuring gradient transitions, dark mode support, and a bright accent color. It includes a subtle hover effect and changes text and background on click (simulated).

Open Preview

                <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-[150px]">
  <button class="follow-button group relative overflow-hidden px-6 py-2 rounded-full font-semibold text-lg transition-all duration-300 ease-out shadow-md
    bg-gradient-to-r from-red-500 to-purple-600 
    hover:from-purple-600 hover:to-red-500 
    text-white dark:text-gray-100
    focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-red-800">
    <span class="relative z-10 block transition-transform duration-300 ease-in-out group-hover:scale-105" data-text-initial="Follow" data-text-followed="Following">Follow</span>
    <span class="absolute inset-0 bg-white opacity-0 transition-opacity duration-300 ease-out group-hover:opacity-10 pointer-events-none"></span>
  </button>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const button = document.querySelector('.follow-button');
      const buttonText = button.querySelector('span[data-text-initial]');

      let isFollowing = false;

      button.addEventListener('click', () => {
        isFollowing = !isFollowing;

        if (isFollowing) {
          buttonText.textContent = buttonText.dataset.textFollowed;
          button.classList.remove('from-red-500', 'to-purple-600', 'hover:from-purple-600', 'hover:to-red-500');
          button.classList.add('from-gray-400', 'to-gray-500', 'dark:from-gray-700', 'dark:to-gray-800', 'hover:from-gray-500', 'hover:to-gray-400', 'dark:hover:from-gray-800', 'dark:hover:to-gray-700',
          'text-gray-800', 'dark:text-gray-200');
          button.classList.remove('text-white', 'dark:text-gray-100');
        } else {
          buttonText.textContent = buttonText.dataset.textInitial;
          button.classList.remove('from-gray-400', 'to-gray-500', 'dark:from-gray-700', 'dark:to-gray-800', 'hover:from-gray-500', 'hover:to-gray-400', 'dark:hover:from-gray-800', 'dark:hover:to-gray-700',
          'text-gray-800', 'dark:text-gray-200');
          button.classList.add('from-red-500', 'to-purple-600', 'hover:from-purple-600', 'hover:to-red-500',
          'text-white', 'dark:text-gray-100');
        }
      });
    });
  </script>
</div>

Follow Button Component

A clean, minimalist 'Follow' button designed with a retro/vintage color palette, suitable for a dashboard or profile page. It features an interactive hover state and dark mode support, embodying Swiss/International typography principles.

Open Preview

                <div class="p-4 sm:p-6 bg-rose-50 dark:bg-zinc-800 rounded-lg shadow-md max-w-sm mx-auto font-sans">
  <div class="flex flex-col items-center space-y-4">
    <img class="w-20 h-20 rounded-full object-cover border-2 border-indigo-400 dark:border-indigo-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
    <div class="text-center">
      <p class="text-lg font-semibold text-zinc-800 dark:text-zinc-100">Jane Doe</p>
      <p class="text-sm text-zinc-600 dark:text-zinc-400">@janedoe_official</p>
    </div>
    <button class="px-6 py-2 rounded-full border-2 border-indigo-500 bg-indigo-400 text-white font-bold text-sm tracking-wide uppercase shadow-md
                   hover:bg-indigo-500 hover:border-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
                   dark:bg-indigo-600 dark:border-indigo-700 dark:hover:bg-indigo-700 dark:focus:ring-offset-zinc-800
                   transition duration-300 ease-in-out">
      Follow
    </button>
  </div>
</div>

Follow Button Component

A complex, paper/print-inspired follow button component for gaming websites, featuring a black and white monochrome design with a bright accent color, optimized for responsiveness and dark mode.

Open Preview

                <div class="font-sans p-4 sm:p-6 md:p-8 bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center">
  <div class="relative bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6 sm:p-8 md:p-10 border-4 border-gray-200 dark:border-gray-700 max-w-sm w-full transform rotate-1 transition-all duration-300 hover:rotate-0">
    <!-- Paper Fold Top Left -->
    <div class="absolute top-0 left-0 w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-gray-300 to-gray-50 dark:from-gray-700 dark:to-gray-800 rounded-bl-lg border-b border-r border-gray-200 dark:border-gray-700 -translate-x-1/2 -translate-y-1/2 rotate-45 transform origin-bottom-right"></div>
    <!-- Paper Fold Bottom Right -->
    <div class="absolute bottom-0 right-0 w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-tl from-gray-300 to-gray-50 dark:from-gray-700 dark:to-gray-800 rounded-tr-lg border-t border-l border-gray-200 dark:border-gray-700 translate-x-1/2 translate-y-1/2 -rotate-45 transform origin-top-left"></div>

    <div class="text-center mb-6">
      <img src="https://randomuser.me/api/portraits/men/84.jpg" alt="Gamer Avatar" class="w-24 h-24 sm:w-28 sm:h-28 rounded-full border-4 border-lime-500 dark:border-lime-400 mx-auto mb-4 object-cover shadow-md transform -rotate-2">
      <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100 relative inline-block before:block before:absolute before:-inset-1 before:bg-gradient-to-r before:from-lime-500 before:to-yellow-400 before:skew-y-3 before:rounded-sm z-0">
        <span class="relative text-white dark:text-gray-900">CyberNinja_XP</span>
      </h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mt-2 font-medium">Pro Gamer | Streamer | Level 99</p>
    </div>

    <div class="flex justify-around items-center mb-6 border-t border-b border-dashed border-gray-300 dark:border-gray-600 py-3">
      <div class="text-center">
        <p class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-200">1.2M</p>
        <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-widest">Followers</p>
      </div>
      <div class="text-center">
        <p class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-200">500</p>
        <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-widest">Following</p>
      </div>
      <div class="text-center">
        <p class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-200">12,345</p>
        <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-widest">Subscribers</p>
      </div>
    </div>

    <div class="flex flex-col space-y-3">
      <button class="w-full py-3 px-4 rounded-lg bg-lime-500 text-white dark:bg-lime-600 dark:text-gray-900 font-bold text-lg uppercase tracking-wider shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-105 active:scale-95 active:translate-y-0 focus:outline-none focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-700 border-b-4 border-lime-700 dark:border-lime-900 relative group overflow-hidden">
        <span class="absolute inset-0 bg-white/20 dark:bg-black/20 transform -skew-x-12 opacity-0 group-hover:opacity-100 transition-all duration-300"></span>
        <span class="relative z-10">Follow Now</span>
      </button>
      <button class="w-full py-3 px-4 rounded-lg bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200 font-semibold text-base uppercase tracking-wide hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 border-b-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500">
        View Profile
      </button>
    </div>

    <div class="mt-6 text-xs text-gray-400 dark:text-gray-500 text-center uppercase tracking-wider relative">
      <span class="absolute left-0 right-0 top-1/2 h-px bg-gray-300 dark:bg-gray-600 transform -translate-y-1/2"></span>
      <span class="relative z-10 bg-white dark:bg-gray-800 px-2 rotate-1">Player ID: #G4M3R_PR0</span>
    </div>
  </div>
</div>

Follow Button Component

A simple, responsive follow button component designed for dating/social platforms with a pastel color scheme and dark mode support.

Open Preview

                <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <button class="follow-button flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold transition-all duration-300 ease-in-out
    bg-gradient-to-r from-purple-200 to-pink-200 text-purple-800 dark:from-purple-800 dark:to-pink-800 dark:text-white
    hover:from-purple-300 hover:to-pink-300 hover:text-purple-900 dark:hover:from-purple-700 dark:hover:to-pink-700 dark:hover:text-white
    focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700
    shadow-lg hover:shadow-xl">
    <svg class="h-5 w-5 mr-2 -ml-1 text-purple-700 dark:text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM8 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0z"></path>
    </svg>
    Follow
  </button>
</div>

Neumorphic Follow Button Component

A complex, neumorphic-styled follow button component with sunset/warm tones, designed for real estate platforms. It features responsive design and dark mode support, making elements appear to extrude from the background using subtle shadows.

Open Preview

                <div class="p-6 md:p-10 bg-orange-100 dark:bg-zinc-800 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm rounded-3xl p-6 shadow-xl relative
    bg-gradient-to-br from-orange-200 to-amber-100 
    dark:from-zinc-700 dark:to-zinc-900 
    dark:shadow-zinc-950/80 shadow-orange-300/60
    
    "> 
    <!-- Neumorphic Card Base -->
    <div class="relative z-10">
      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center space-x-4">
          <img class="w-16 h-16 rounded-full 
            border-2 border-orange-300 dark:border-zinc-600 
            shadow-lg shadow-orange-300/40 dark:shadow-zinc-950/60 
            object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Agent Avatar">
          <div>
            <h3 class="text-xl font-semibold text-orange-900 dark:text-orange-200">Evelyn Sharp</h3>
            <p class="text-sm text-orange-700 dark:text-zinc-400">Senior Agent</p>
          </div>
        </div>
        <!-- More Info Button -->
        <a href="#" class="
          px-4 py-2 rounded-xl text-sm font-medium 
          bg-gradient-to-br from-orange-300 to-amber-200 
          dark:from-zinc-600 dark:to-zinc-800 
          text-orange-900 dark:text-orange-200 
          shadow-inner shadow-orange-400/60 dark:shadow-zinc-900/60 
          hover:from-orange-400 hover:to-orange-300 
          dark:hover:from-zinc-700 dark:hover:to-zinc-600 
          transform transition-transform duration-300 hover:scale-105 
          active:shadow-none active:scale-95
          sm: block md:inline-block">
          More Info
        </a>
      </div>

      <p class="text-orange-800 dark:text-zinc-300 mb-6 text-sm leading-relaxed">
        Specializing in luxury residential properties in metropolitan areas. Over 10 years of experience helping clients find their dream homes.
      </p>

      <!-- Key Stats / Properties -->
      <div class="grid grid-cols-2 gap-4 mb-8">
        <div class="
          p-4 rounded-xl text-center 
          bg-gradient-to-br from-orange-100 to-amber-50 
          dark:from-zinc-700 dark:to-zinc-900 
          shadow-md shadow-orange-200/50 dark:shadow-zinc-950/50 
          border border-orange-200/50 dark:border-zinc-800/50
          ">
          <p class="text-lg font-bold text-orange-900 dark:text-orange-200">150+</p>
          <p class="text-sm text-orange-700 dark:text-zinc-400">Properties Sold</p>
        </div>
        <div class="
          p-4 rounded-xl text-center 
          bg-gradient-to-br from-orange-100 to-amber-50 
          dark:from-zinc-700 dark:to-zinc-900 
          shadow-md shadow-orange-200/50 dark:shadow-zinc-950/50 
          border border-orange-200/50 dark:border-zinc-800/50
          ">
          <p class="text-lg font-bold text-orange-900 dark:text-orange-200">4.9</p>
          <p class="text-sm text-orange-700 dark:text-zinc-400">Rating</p>
        </div>
      </div>

      <!-- Follow Button -->
      <button class="
        w-full py-4 rounded-2xl text-lg font-bold 
        bg-gradient-to-br from-orange-400 to-amber-300 
        dark:from-amber-600 dark:to-orange-500 
        text-orange-950 dark:text-zinc-950 
        shadow-lg shadow-orange-500/60 dark:shadow-amber-900/60 
        hover:from-orange-500 hover:to-orange-400 
        dark:hover:from-amber-700 dark:hover:to-orange-600 
        transform transition-transform duration-300 
        focus:outline-none focus:ring-2 focus:ring-orange-300 focus:ring-offset-2 focus:ring-offset-orange-100 
        dark:focus:ring-amber-500 dark:focus:ring-offset-amber-900 
        active:shadow-none active:scale-98
        flex items-center justify-center space-x-2
        ">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 1 014 4v6a4 4 01-4 4H8a4 4 01-4-4v-6a4 4 014-4h4z" />
        </svg>
        <span>Follow Agent</span>
      </button>

      <!-- Contact Options -->
      <div class="flex justify-around mt-8">
        <button class="
          p-4 rounded-full 
          bg-gradient-to-br from-orange-200 to-amber-100 
          dark:from-zinc-700 dark:to-zinc-900 
          text-orange-700 dark:text-orange-200 
          shadow-md shadow-orange-300/50 dark:shadow-zinc-950/50 
          hover:from-orange-300 hover:to-orange-200 
          dark:hover:from-zinc-800 dark:hover:to-zinc-700 
          transform transition-transform duration-300 hover:scale-110 
          active:shadow-none active:scale-95
          focus:outline-none focus:ring-2 focus:ring-orange-300 focus:ring-offset-2 focus:ring-offset-orange-100 
          dark:focus:ring-amber-500 dark:focus:ring-offset-amber-900
          ">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 011.854-1.995A2 2 018 2h8a2 2 011.819 1.056l-3.328 10.655a2 2 01-1.077 1.077L13 18.066V20h-2v-1.934L7.509 15.7A2 2 016.438 14.623L3.181 4.944A2 2 013 5z" />
          </svg>
        </button>
        <button class="
          p-4 rounded-full 
          bg-gradient-to-br from-orange-200 to-amber-100 
          dark:from-zinc-700 dark:to-zinc-900 
          text-orange-700 dark:text-orange-200 
          shadow-md shadow-orange-300/50 dark:shadow-zinc-950/50 
          hover:from-orange-300 hover:to-orange-200 
          dark:hover:from-zinc-800 dark:hover:to-zinc-700 
          transform transition-transform duration-300 hover:scale-110 
          active:shadow-none active:scale-95
          focus:outline-none focus:ring-2 focus:ring-orange-300 focus:ring-offset-2 focus:ring-offset-orange-100 
          dark:focus:ring-amber-500 dark:focus:ring-offset-amber-900
          ">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 01-4.255-1.106L4 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
          </svg>
        </button>
        <button class="
          p-4 rounded-full 
          bg-gradient-to-br from-orange-200 to-amber-100 
          dark:from-zinc-700 dark:to-zinc-900 
          text-orange-700 dark:text-orange-200 
          shadow-md shadow-orange-300/50 dark:shadow-zinc-950/50 
          hover:from-orange-300 hover:to-orange-200 
          dark:hover:from-zinc-800 dark:hover:to-zinc-700 
          transform transition-transform duration-300 hover:scale-110 
          active:shadow-none active:scale-95
          focus:outline-none focus:ring-2 focus:ring-orange-300 focus:ring-offset-2 focus:ring-offset-orange-100 
          dark:focus:ring-amber-500 dark:focus:ring-offset-amber-900
          ">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 010.591 1.409L2.5 12l.529.071c.783.111 1.547.452 2.18.98L7.058 15.65h.001a4.522 4.522 004.582 0l2.35-1.921c.633-.528 1.397-.869 2.18-.98l.529-.071L18.5 5a2 2 00-1.802-1.802zM15 11a3 3 01-3 3s-3-3-3-3" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Search Components

Categories

Follow Button