Follow Button 구성 요소

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