検索コンポーネント

カテゴリ

コンポーネントいいね/リアクションボタン

いいね/リアクションボタン

コンテンツに対する反応を表現するためのボタン

Monospace_Developer_Reaction_Buttons

レトロ/ビンテージの配色でモノスペース/開発者の美学に触発されたシンプルでレスポンシブな「いいね/リアクションボタン」コンポーネントで、ニュースやジャーナリズムのWebサイトに適しています。ダークモードのサポートが含まれています。

                <div class="flex flex-wrap cursor-pointer font-mono text-gray-800 dark:text-gray-200 bg-gray-50 dark:bg-gray-900 p-4 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm">
  <button class="flex items-center space-x-2 px-3 py-1 m-1 rounded-sm border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-sm md:text-base">
    <span class="text-orange-500 dark:text-orange-400">&#9654;</span>
    <span class="hidden sm:inline">Upvote</span>
    <span class="text-xs ml-1 dark:text-gray-400">123</span>
  </button>

  <button class="flex items-center space-x-2 px-3 py-1 m-1 rounded-sm border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-sm md:text-base">
    <span class="text-blue-500 dark:text-blue-400">&#9733;</span>
    <span class="hidden sm:inline">Bookmark</span>
    <span class="text-xs ml-1 dark:text-gray-400">45</span>
  </button>

  <button class="flex items-center space-x-2 px-3 py-1 m-1 rounded-sm border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-sm md:text-base">
    <span class="text-green-600 dark:text-green-500">&#9600;</span>
    <span class="hidden sm:inline">Approve</span>
    <span class="text-xs ml-1 dark:text-gray-400">89</span>
  </button>

  <button class="flex items-center space-x-2 px-3 py-1 m-1 rounded-sm border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-sm md:text-base">
    <span class="text-purple-600 dark:text-purple-500">&#x22C6;</span>
    <span class="hidden sm:inline">Favorite</span>
    <span class="text-xs ml-1 dark:text-gray-400">32</span>
  </button>

  <button class="flex items-center space-x-2 px-3 py-1 m-1 rounded-sm border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-sm md:text-base">
    <span class="text-red-500 dark:text-red-400">&#x2717;</span>
    <span class="hidden sm:inline">Disagree</span>
    <span class="text-xs ml-1 dark:text-gray-400">7</span>
  </button>
</div>

サイバーパンクライクリアクションボタン

マーケットプレイス向けのシンプルで応答性の高い「いいね/リアクション」ボタンコンポーネントで、オーシャンブルーの色調とダークモードのサポートを備えたサイバーパンクの美学が特徴です。

開けるプレビュー

                <div class="p-4 sm:p-6 bg-gray-900 border border-blue-900 shadow-lg rounded-xl dark:bg-gray-950 dark:border-blue-950">
  <div class="flex justify-around items-center space-x-2">
    <button class="flex items-center space-x-1 p-2 rounded-full transition-all duration-300 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-700 active:scale-95 group">
      <svg class="w-6 h-6 text-blue-400 group-hover:text-blue-200 transition-colors duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path>
      </svg>
      <span class="block text-sm font-semibold text-blue-300 group-hover:text-blue-100 transition-colors duration-300 hidden sm:block">Like</span>
      <span class="text-sm text-blue-500 group-hover:text-blue-300 transition-colors duration-300">2.5K</span>
    </button>

    <button class="flex items-center space-x-1 p-2 rounded-full transition-all duration-300 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-700 active:scale-95 group">
      <svg class="w-6 h-6 text-blue-400 group-hover:text-blue-200 transition-colors duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M18 13v6a2 2 0 01-2 2H4a2 2 0 01-2-2V7a2 2 0 012-2h8l3-3 3 3v6z"></path>
      </svg>
      <span class="block text-sm font-semibold text-blue-300 group-hover:text-blue-100 transition-colors duration-300 hidden sm:block">Save</span>
    </button>

    <button class="flex items-center space-x-1 p-2 rounded-full transition-all duration-300 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-700 active:scale-95 group">
      <svg class="w-6 h-6 text-blue-400 group-hover:text-blue-200 transition-colors duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M15 8a3 3 0 10-2.977-2.977L5.582 12.02A3 3 0 1010.42.977l6.467 6.467a3 3 0 10-.98.98L9.02 8.02A3 3 0 1015 8z"></path>
      </svg>
      <span class="block text-sm font-semibold text-blue-300 group-hover:text-blue-100 transition-colors duration-300 hidden sm:block">Share</span>
    </button>
  </div>
</div>

アールデコ調のライク/リアクションボタンコンポーネント

アールデコ調の美学を備えたシンプルで応答性の高い「いいね/リアクション」ボタンのセットで、スポーツ/フィットネスアプリケーションに適しています。温かみのあるニュートラルとダークモードのサポートが特徴です。

開けるプレビュー

                <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">

  <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl border-t-4 border-b-4 border-amber-600 dark:border-amber-500 w-full max-w-sm mx-auto transition-colors duration-300">
    <div class="flex justify-around items-center border-t border-b border-gray-300 dark:border-gray-700 py-4 mb-4 relative overflow-hidden">
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 pointer-events-none opacity-5 dark:opacity-10">
        <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
          <rect x="0" y="0" width="100" height="100" fill="none" />
          <path d="M0 0 L10 10 L0 20 Z M100 0 L90 10 L100 20 Z M0 100 L10 90 L0 80 Z M100 100 L90 90 L100 80 Z M50 0 L40 10 L60 10 L50 0 Z M50 100 L40 90 L60 90 L50 100 Z" fill="currentColor" class="text-gray-400 dark:text-gray-600"/>
          <path d="M20 5 L25 0 L30 5 Z M70 5 L75 0 L80 5 Z M20 95 L25 100 L30 95 Z M70 95 L75 100 L80 95 Z M5 20 L0 25 L5 30 Z M95 20 L100 25 L95 30 Z M5 70 L0 75 L5 80 Z M95 70 L100 75 L95 80 Z" fill="currentColor" class="text-gray-400 dark:text-gray-600"/>
        </svg>
      </div>

      <button aria-label="Like Reaction" class="flex flex-col items-center group focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 rounded-md p-2 relative z-10">
        <svg class="w-8 h-8 md:w-10 md:h-10 text-gray-700 dark:text-gray-300 group-hover:text-amber-600 dark:group-hover:text-amber-400 transform group-hover:scale-110 transition-transform duration-200 ease-in-out" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
        </svg>
        <span class="text-sm md:text-base text-gray-600 dark:text-gray-400 mt-1 font-medium group-hover:text-amber-700 dark:group-hover:text-amber-300 transition-colors duration-200">Like</span>
      </button>

      <button aria-label="Clap Reaction" class="flex flex-col items-center group focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 rounded-md p-2 relative z-10">
        <svg class="w-8 h-8 md:w-10 md:h-10 text-gray-700 dark:text-gray-300 group-hover:text-amber-600 dark:group-hover:text-amber-400 transform group-hover:rotate-12 transition-transform duration-200 ease-in-out" fill="currentColor" viewBox="0 0 24 24">
          <path d="M15 1H9c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm-1 8h-4c-1.11 0-2 .89-2 2v3c0 1.11.89 2 2 2h4c1.11 0 2-.89 2-2v-3c0-1.11-.89-2-2-2zm-6 8h-4c-1.11 0-2 .89-2 2v3c0 1.11.89 2 2 2h4c1.11 0 2-.89 2-2v-3c0-1.11-.89-2-2-2zm12 0h-4c-1.11 0-2 .89-2 2v3c0 1.11.89 2 2 2h4c1.11 0 2-.89 2-2v-3c0-1.11-.89-2-2-2z"/>
        </svg>
        <span class="text-sm md:text-base text-gray-600 dark:text-gray-400 mt-1 font-medium group-hover:text-amber-700 dark:group-hover:text-amber-300 transition-colors duration-200">Clap</span>
      </button>

      <button aria-label="Boom Reaction" class="flex flex-col items-center group focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 rounded-md p-2 relative z-10">
        <svg class="w-8 h-8 md:w-10 md:h-10 text-gray-700 dark:text-gray-300 group-hover:text-amber-600 dark:group-hover:text-amber-400 transform group-hover:-translate-y-1 transition-transform duration-200 ease-in-out" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.9L9.1 16H8a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h1.1L11 6.1H8V4h8v2.1l-2 3.8h1c.55 0 1 .45 1 1v2c0 .55-.45 1-1 1h-1.1l2 3.8H16v2h-4z"/>
        </svg>
        <span class="text-sm md:text-base text-gray-600 dark:text-gray-400 mt-1 font-medium group-hover:text-amber-700 dark:group-hover:text-amber-300 transition-colors duration-200">Boom!</span>
      </button>
    </div>

    <div class="text-center text-gray-700 dark:text-gray-300">
      <p class="text-lg font-semibold tracking-wider uppercase text-amber-800 dark:text-amber-400">Show Your Support!</p>
      <p class="text-sm mt-2 text-gray-500 dark:text-gray-400">Engage with our latest updates and achievements.</p>
    </div>
  </div>

</div>

レトロゲームのリアクションボタン

ゲームWebサイト向けの複雑でレトロなテーマのリアクションボタンコンポーネントで、「いいね」やその他のカウント付きリアクションタイプを特徴とし、秋の色とダークモードのサポートを含む完全な応答性で設計されています。

開けるプレビュー

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-amber-200 to-amber-500 dark:from-gray-800 dark:to-gray-950 min-h-screen flex items-center justify-center font-['Press_Start_2P',_cursive] tracking-wide">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-gradient-to-br from-red-800 to-red-900 border-4 border-solid border-red-950 dark:from-gray-700 dark:to-gray-900 dark:border-gray-950 rounded-lg p-3 sm:p-4 md:p-6 shadow-2xl transform rotate-0 hover:rotate-1 transition-all duration-300 ease-in-out relative overflow-hidden">
    <!-- Scanline Overlay for Retro Effect -->
    <div class="absolute inset-0 z-10 pointer-events-none opacity-20 dark:opacity-10">
      <div class="w-full h-full bg-repeat-y bg-[length:100%_4px] bg-[url('data:image/svg+xml;base264,PHN2ZyB2aWQ9J0xheWVyXzEnIGRhdGEtbmFtZT0nTGF5ZXIgMScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB2aWV3Qm94PScwIDAgNCA0Jz48ZGVmcz48c3R5bGU+LmNscy0xLHtmaWxsOm5vbmU7c3Ryb2tlOiNGRkY7c3Ryb2tlLXdpZHRoOjEuNjFweDtvcGFjaXR5OjAuNTA7fS5jbHMtMntmaWxsOiNGRkY7fTwvc3R5bGU+PC9kZWZzPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iMC42NyIgYz0iMC42NyIgd2lkdGhcdX0iMy44OCIgaGVpZ2h0PSIyLjY2Ii8-PHJlY3QgY2xhc3M9ImNscy0yIiB5PSIyLjI4IiB3aWR0aD0iNC4xIiBoZWlnaHQ9IjEuMDUiLz48L3N2Zz4=')] bg-white"></div>
    </div>

    <div class="relative z-20">
      <div class="text-center mb-4 md:mb-6">
        <h2 class="text-xl sm:text-2xl md:text-3xl lg:text-4xl text-amber-300 dark:text-orange-400 mb-2 drop-shadow-[0_0_8px_rgba(255,200,0,0.8)] dark:drop-shadow-[0_0_8px_rgba(255,165,0,0.8)]">GAME OVER? NAY!</h2>
        <p class="text-sm sm:text-base text-amber-100 dark:text-gray-300">Rate this 'EPIC' moment!</p>
      </div>

      <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 md:gap-4 lg:gap-5">
        <!-- Like Button -->
        <button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
          <span class="block text-3xl sm:text-4xl mb-1 group-hover:animate-bounce-y drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">👍</span>
          <span class="block">Like</span>
          <span class="text-xs sm:text-sm mt-1 text-amber-50">1.2K</span>
        </button>

        <!-- Epic Button -->
        <button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
          <span class="block text-3xl sm:text-4xl mb-1 group-hover:rotate-12 group-hover:scale-110 drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">🔥</span>
          <span class="block">Epic</span>
          <span class="text-xs sm:text-sm mt-1 text-amber-50">789</span>
        </button>

        <!-- LOL Button -->
        <button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
          <span class="block text-3xl sm:text-4xl mb-1 group-hover:animate-spin-slow drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">😂</span>
          <span class="block">LOL</span>
          <span class="text-xs sm:text-sm mt-1 text-amber-50">543</span>
        </button>

        <!-- Sad Button -->
        <button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
          <span class="block text-3xl sm:text-4xl mb-1 group-hover:animate-shake drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">😭</span>
          <span class="block">oof</span>
          <span class="text-xs sm:text-sm mt-1 text-amber-50">210</span>
        </button>

        <!-- Mind Blown Button -->
        <button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
          <span class="block text-3xl sm:text-4xl mb-1 group-hover:scale-125 drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">🤯</span>
          <span class="block">WTF!</span>
          <span class="text-xs sm:text-sm mt-1 text-amber-50">99</span>
        </button>

        <!-- GG Button -->
        <button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
          <span class="block text-3xl sm:text-4xl mb-1 group-hover:scale-110 drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">🏆</span>
          <span class="block">GG</span>
          <span class="text-xs sm:text-sm mt-1 text-amber-50">350</span>
        </button>
      </div>

      <div class="mt-6 md:mt-8 p-3 bg-red-900 border-2 border-red-950 dark:bg-gray-800 dark:border-gray-900 rounded-md shadow-inner text-amber-100 dark:text-gray-300">
        <p class="text-center text-sm md:text-base">Your reactions power up the leaderboard!</p>
      </div>
    </div>
  </div>

  <!-- Custom Animation Styles (would be in a <style> tag or CSS file) -->
  <style>
    @keyframes bounce-y {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-0.15em); }
    }
    .group-hover\:animate-bounce-y:hover {
      animation: bounce-y 0.6s ease-in-out infinite;
    }

    @keyframes spin-slow {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .group-hover\:animate-spin-slow:hover {
      animation: spin-slow 2s linear infinite;
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-0.1em); }
      20%, 40%, 60%, 80% { transform: translateX(0.1em); }
    }
    .group-hover\:animate-shake:hover {
      animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    }

    /* To use 'Press Start 2P' font, link it from Google Fonts: */
    /* @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); */
    /* Then apply: font-family: 'Press Start 2P', cursive; */
  </style>
</div>

ニューモーフィックいいね/リアクションボタン

ニューモーフィックなデザインスタイル、ジュエルトーンの配色、ダークモードのサポートを備えた、シンプルで応答性の高い「いいね」/リアクションボタンのセットで、金融/銀行のインターフェースに適しています。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-emerald-50 dark:bg-emerald-950 p-4 font-sans">
  <div class="flex space-x-4 p-4 rounded-3xl shadow-xl dark:shadow-2xl bg-emerald-100 dark:bg-emerald-900
              shadow-emerald-200/80 dark:shadow-emerald-900/80
              dark:shadow-inner-xl dark:shadow-emerald-800/80">

    <!-- Like Button -->
    <button class="flex items-center justify-center w-12 h-12 rounded-full 
                   bg-emerald-100 dark:bg-emerald-900 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   text-emerald-700 dark:text-emerald-300 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
                   transition-all duration-300 ease-in-out">
      <svg class="w-6 h-6" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
      </svg>
    </button>

    <!-- Thumbs Up Button -->
    <button class="flex items-center justify-center w-12 h-12 rounded-full 
                   bg-emerald-100 dark:bg-emerald-900 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   text-emerald-700 dark:text-emerald-300 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
                   transition-all duration-300 ease-in-out">
      <svg class="w-6 h-6" 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="M14 10V9m0-1a7 7 0 00-14 0v1m14 0a7 7 0 0114 0v1m-7 8c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3zM4 16h-.01M7 16h.01M10 16h.01M13 16h.01M16 16h.01M19 16h.01M22 16h.01"></path>
      </svg>
    </button>

    <!-- Thumbs Down Button -->
    <button class="flex items-center justify-center w-12 h-12 rounded-full 
                   bg-emerald-100 dark:bg-emerald-900 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   text-emerald-700 dark:text-emerald-300 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
                   transition-all duration-300 ease-in-out">
      <svg class="w-6 h-6 transform rotate-180" 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="M14 10V9m0-1a7 7 0 00-14 0v1m14 0a7 7 0 0114 0v1m-7 8c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3zM4 16h-.01M7 16h.01M10 16h.01M13 16h.01M16 16h.01M19 16h.01M22 16h.01"></path>
      </svg>
    </button>

  </div>
</div>

<style>
  /* Neumorphic Shadows (Tailwind custom values) */
  /* Light Mode */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #98d8be, -6px -6px 12px #c9fff2;
  }
  .hover\:shadow-neumorphic-inset-light:hover {
    box-shadow: inset 4px 4px 8px #98d8be, inset -4px -4px 8px #c9fff2;
  }

  /* Dark Mode */
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #0a3d2e, -6px -6px 12px #33a77a;
  }
  .dark .hover\:shadow-neumorphic-inset-dark:hover {
    box-shadow: inset 4px 4px 8px #0a3d2e, inset -4px -4px 8px #33a77a;
  }

  /* General neumorphic base for the container */
  .shadow-xl {
    box-shadow: 10px 10px 20px rgba(0,0,0,0.1), -10px -10px 20px rgba(255,255,255,1); /* Light mode base */
  }
  .dark .shadow-2xl {
    box-shadow: 10px 10px 20px rgba(0,0,0,0.5), -10px -10px 20px rgba(45,45,45,1); /* Dark mode base */
  }

  /* Specific overrides for the emerald background */
  .shadow-emerald-200\/80 {
    box-shadow: 10px 10px 20px rgba(181, 237, 212, 0.8), -10px -10px 20px rgba(239, 255, 247, 1);
  }
  .dark .shadow-emerald-900\/80 {
    box-shadow: 10px 10px 20px rgba(18, 59, 45, 0.8), -10px -10px 20px rgba(41, 107, 81, 1);
  }

  /* Inner shadow for the main container (more pronounced in dark mode) */
  .dark .shadow-inner-xl {
    box-shadow: inset 5px 5px 10px #0a3d2e, inset -5px -5px 10px #33a77a;
  }
</style>

Retro_Reaction_Buttons_Industrial

レトロなインダストリアルの美学を備えたシンプルでレスポンシブな「いいね/リアクションボタン」コンポーネントで、製造または工業企業のWebサイトに適しています。

開けるプレビュー

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-mono select-none">
  <div class="bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl p-6 border-4 border-gray-400 dark:border-gray-700 w-full max-w-sm">
    <h3 class="text-center text-xl font-bold mb-6 text-gray-800 dark:text-gray-200 uppercase tracking-wider">Process Feedback</h3>
    <div class="flex justify-around space-x-4 mb-6">
      <!-- Like Button -->
      <button class="flex flex-col items-center p-3 rounded-md transition-transform duration-200 ease-in-out transform hover:scale-105 active:scale-95
                     bg-blue-600 dark:bg-blue-700 text-white font-semibold shadow-lg
                     border-b-4 border-r-4 border-blue-800 dark:border-blue-900
                     hover:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600">
        <svg class="w-8 h-8 md:w-10 md:h-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.5a2.5 2.5 0 002.5 2.5h2.464l-.929 3.488a1 1 0 001.942.518L13 16.582V13a2.5 2.5 0 002.5-2.5V6.5a2.5 2.5 0 00-2.5-2.5h-1.586a1.5 1.5 0 01-1.06-.44L10 2.5v-.5A1.5 1.5 0 008.5 1h-1A1.5 1.5 0 006 2.5v1.272a1.5 1.5 0 01-.447 1.06L4.354 7.646A1.5 1.5 0 003.293 8.707L2.5 9.5a1.5 1.5 0 00-.5 1.06v0z"></path>
        </svg>
        <span class="mt-2 text-sm md:text-base">Success</span>
      </button>

      <!-- Dislike Button -->
      <button class="flex flex-col items-center p-3 rounded-md transition-transform duration-200 ease-in-out transform hover:scale-105 active:scale-95
                     bg-red-600 dark:bg-red-700 text-white font-semibold shadow-lg
                     border-b-4 border-r-4 border-red-800 dark:border-red-900
                     hover:bg-red-700 dark:hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-600">
        <svg class="w-8 h-8 md:w-10 md:h-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.5a2.5 2.5 0 00-2.5-2.5H9.036l.929-3.488A1 1 0 008.023.002L7 3.418V7a2.5 2.5 0 00-2.5 2.5v4a2.5 2.5 0 002.5 2.5h1.586a1.5 1.5 0 011.06.44L10 17.5v.5A1.5 1.5 0 0011.5 19h1a1.5 1.5 0 001.5-1.5v-1.272a1.5 1.5 0 01.447-1.06L15.646 12.354A1.5 1.5 0 0016.707 11.293L17.5 10.5a1.5 1.5 0 00.5-1.06v0z"></path>
        </svg>
        <span class="mt-2 text-sm md:text-base">Failure</span>
      </button>
    </div>
    <p class="text-center text-sm text-gray-700 dark:text-gray-400 mt-4 leading-relaxed">Provide quick feedback on operational processes.</p>
  </div>
</div>

Like/Reaction Buttons コンポーネント

音楽/オーディオプラットフォーム用の複雑でミニマリストなリアクションボタンのセットで、鮮やかな色、ダークモードのサポート、完全な応答性を備えています。

開けるプレビュー

                <div class="flex flex-col items-center justify-center p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 font-sans">

  <div class="flex flex-wrap items-center justify-center gap-3 sm:gap-4 p-3 sm:p-5 md:p-6 rounded-2xl shadow-xl bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm border border-fuchsia-100 dark:border-gray-700 max-w-xl mx-auto">

    <!-- Heart Button -->
    <button class="flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-300 ease-in-out
                   text-red-600 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-white
                   dark:text-red-400 dark:bg-red-900 dark:bg-opacity-30 dark:hover:bg-red-900 dark:focus:ring-red-400 dark:focus:ring-offset-gray-800">
      <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
      </svg>
      <span class="text-sm font-semibold hidden sm:inline">Liked</span>
      <span class="text-sm font-semibold">1.2K</span>
    </button>

    <!-- Fire Button -->
    <button class="flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-300 ease-in-out
                   text-orange-600 bg-orange-50 hover:bg-orange-100 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-white
                   dark:text-orange-400 dark:bg-orange-900 dark:bg-opacity-30 dark:hover:bg-orange-900 dark:focus:ring-orange-400 dark:focus:ring-offset-gray-800">
      <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2.69C10.74 1.76 9.07 1 7.5 1 4.42 1 2 3.42 2 6.5c0 2.21 1.25 4.14 3.12 5.17C7.45 13.9 12 18.5 12 18.5s4.55-4.6 6.88-6.83C20.75 10.64 22 8.71 22 6.5c0-3.08-2.42-5.5-5.5-5.5-1.57 0-3.24.76-4.5 1.76zM13.43 14L12 17.5l-1.43-3.5L7 11.5l3.5-1.43L12 7l1.43 3.07L17 11.5l-3.57 2.5z"/>
      </svg>
      <span class="text-sm font-semibold hidden sm:inline">Fiery</span>
      <span class="text-sm font-semibold">543</span>
    </button>

    <!-- Clap Button -->
    <button class="flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-300 ease-in-out
                   text-teal-600 bg-teal-50 hover:bg-teal-100 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 focus:ring-offset-white
                   dark:text-teal-400 dark:bg-teal-900 dark:bg-opacity-30 dark:hover:bg-teal-900 dark:focus:ring-teal-400 dark:focus:ring-offset-gray-800">
      <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M18 10h-4V4h-4v6H6l6 6 6-6zM4 20h16v2H4z"/>
      </svg>
      <span class="text-sm font-semibold hidden sm:inline">Clap</span>
      <span class="text-sm font-semibold">891</span>
    </button>

    <!-- Headphone Button -->
    <button class="flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-300 ease-in-out
                   text-blue-600 bg-blue-50 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white
                   dark:text-blue-400 dark:bg-blue-900 dark:bg-opacity-30 dark:hover:bg-blue-900 dark:focus:ring-blue-400 dark:focus:ring-offset-gray-800">
      <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 1A7 7 0 005 8v6a7 7 0 0014 0V8a7 7 0 00-7-7zm0 2a5 5 0 015 5v6a5 5 0 01-10 0V8a5 5 0 015-5zm-5 8h-2v3h2v-3zm10 0h-2v3h2v-3zm-5 5a2 2 0 110 4 2 2 0 010-4z"/>
      </svg>
      <span class="text-sm font-semibold hidden sm:inline">Vibe</span>
      <span class="text-sm font-semibold">300</span>
    </button>

    <!-- Share Button -->
    <button class="flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-300 ease-in-out
                   text-purple-600 bg-purple-50 hover:bg-purple-100 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white
                   dark:text-purple-400 dark:bg-purple-900 dark:bg-opacity-30 dark:hover:bg-purple-900 dark:focus:ring-purple-400 dark:focus:ring-offset-gray-800">
      <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.52.48 1.2.77 1.96.77 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L6.04 9.11c-.52-.48-1.2-.77-1.96-.77-1.66 0-3 1.34-3 3s1.34 3 3 3c.76 0 1.44-.3 1.96-.77l7.05 4.11c-.05.23-.09.46-.09.7 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z"/>
      </svg>
      <span class="text-sm font-semibold hidden sm:inline">Share</span>
    </button>

  </div>

</div>

Like/Reaction Buttons コンポーネント

複雑で応答性が高く、単色の「いいね」/リアクションボタンコンポーネントで、ビジネス/企業のWebサイト向けのマイクロインタラクションに焦点を当てたアニメーションを備え、ダークテーマをサポートします。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="flex space-x-2 p-4 rounded-lg bg-white dark:bg-gray-800 shadow-lg">
    <!-- Like Button -->
    <button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 dark:hover:bg-blue-600 hover:text-white transform transition duration-300 hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 group">
      <svg class="w-5 h-5 text-gray-600 dark:text-gray-400 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="M14 10h4.764a2 2 0 011.857 2.118l-2.625 10A2 2 0 0117.279 22H3.721c-1.146 0-2.07-.988-1.921-2.118l2.625-10A2 2 0 016.721 10h4.764M14 10V5a2 2 0 00-2-2h-2a2 2 0 00-2 2v5m7 2v8a2 2 0 002 2h2a2 2 0 002-2v-8m-7 0H3"></path></svg>
      <span class="font-semibold">Like</span>
    </button>

    <!-- Reaction Buttons with Popover Effect -->
    <div class="relative group">
      <button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 dark:hover:bg-blue-600 hover:text-white transform transition duration-300 hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        <svg class="w-5 h-5 text-gray-600 dark:text-gray-400 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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        <span class="font-semibold">React</span>
      </button>

      <!-- Reactions Popover -->
      <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-2 rounded-full bg-white dark:bg-gray-800 shadow-xl opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-300 transform scale-95 group-hover:scale-100 group-focus-within:scale-100 origin-bottom flex space-x-2">
        <button class="p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-700 transform transition duration-200 hover:scale-125 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" title="Love">
          <span class="text-2xl">❤️</span>
        </button>
        <button class="p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-700 transform transition duration-200 hover:scale-125 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" title="Haha">
          <span class="text-2xl">😂</span>
        </button>
        <button class="p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-700 transform transition duration-200 hover:scale-125 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" title="Wow">
          <span class="text-2xl">😮</span>
        </button>
        <button class="p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-700 transform transition duration-200 hover:scale-125 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" title="Sad">
          <span class="text-2xl">😢</span>
        </button>
        <button class="p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-700 transform transition duration-200 hover:scale-125 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" title="Angry">
          <span class="text-2xl">😡</span>
        </button>
      </div>
    </div>
  </div>
</div>

Glassmorphism Like/Reaction Buttons コンポーネント

ポートフォリオのGlassmorphism Like / Reaction Buttonsコンポーネント - シンプル、レスポンシブ、ダークテーマ

開けるプレビュー

                <div
  class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900"
>
  <div
    class="flex space-x-4 p-4 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20"
  >
    <!-- Like Button -->
    <button
      class="flex items-center space-x-2 px-4 py-2 bg-blue-500 bg-opacity-70 dark:bg-blue-700 dark:bg-opacity-70 text-white rounded-full transition-transform transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-5 w-5"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm3-1a1 1 0 100-2 1 1 0 000 2zm3 1a1 1 0 100-2 1 1 0 000 2zm-3 4a1 1 0 100-2 1 1 0 000 2z"
          clip-rule="evenodd"
        />
      </svg>
      <span class="font-semibold">Like</span>
    </button>

    <!-- Heart Reaction Button -->
    <button
      class="flex items-center space-x-2 px-4 py-2 bg-red-500 bg-opacity-70 dark:bg-red-700 dark:bg-opacity-70 text-white rounded-full transition-transform transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-75"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-5 w-5"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
          clip-rule="evenodd"
        />
      </svg>
      <span class="font-semibold">Love</span>
    </button>

    <!-- Laugh Reaction Button -->
    <button
      class="flex items-center space-x-2 px-4 py-2 bg-yellow-500 bg-opacity-70 dark:bg-yellow-700 dark:bg-opacity-70 text-white rounded-full transition-transform transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-75"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-5 w-5"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm3-1a1 1 0 100-2 1 1 0 000 2zm3 1a1 1 0 100-2 1 1 0 000 2zm-3 4a1 1 0 100-2 1 1 0 000 2z"
          clip-rule="evenodd"
        />
      </svg>
      <span class="font-semibold">Haha</span>
    </button>
  </div>
</div>

類似のダークモードのいいね/リアクションボタン

ポートフォリオ用の複雑でレスポンシブな「いいね/リアクションボタン」コンポーネントで、ダークモードのUIと類似の配色を備え、純粋なHTMLとTailwind CSSを使用して実装されています。Tailwind の dark: プレフィックスを介してダークモードをサポートします。

開けるプレビュー

                <div class="min-h-screen bg-gray-900 p-8 flex flex-col items-center justify-center dark:bg-gray-900">

  <h1 class="text-4xl font-bold text-white mb-8">Portfolio Showcase</h1>

  <div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-2xl w-full dark:bg-gray-800">
    
    <div class="flex items-center mb-6">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500 mr-4">
      <div>
        <p class="text-white text-lg font-semibold">John Doe</p>
        <p class="text-gray-400 text-sm">Web Developer - <span class="text-purple-400">@john.doe</span></p>
      </div>
    </div>

    <img src="https://picsum.photos/seed/portfolio-project/800/400" alt="Project Image" class="w-full h-64 object-cover rounded-md mb-6 border border-purple-600">
    
    <p class="text-gray-300 text-base mb-6">
      This is an example portfolio project showcasing a beautiful and responsive web design.
      It utilizes modern CSS practices and aims for an excellent user experience. The color scheme 
      is analogous, creating a harmonious and aesthetically pleasing look.
    </p>

    <div class="flex items-center justify-between text-gray-400 text-sm mb-6">
      <span>2 hours ago</span>
      <span>UX/UI Design, Front-end Development</span>
    </div>

    <div class="flex items-center space-x-6">
      
      <!-- Like Button -->
      <button class="flex items-center text-gray-400 hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M9.71 18.29a.5.5 0 00.58 0c2.81-2.4 5.2-4.52 7.03-6.17a3.5 3.5 0 00.91-3.69c-.48-1.07-1.46-1.89-2.58-2.19-1.12-.3-2.31-.1-3.32.55-.57.36-1.12.79-1.63 1.25a.5.5 0 01-.7 0c-.51-.46-1.06-.89-1.63-1.25-1.01-.65-2.2-.85-3.32-.55-1.12.3-2.1.92-2.58 2.19a3.5 3.5 0 00.91 3.69c1.83 1.65 4.22 3.77 7.03 6.17z" clip-rule="evenodd"></path>
        </svg>
        <span class="font-semibold">Like</span>
        <span class="ml-1 text-sm">(1.2K)</span>
      </button>

      <!-- Comment Button -->
      <button class="flex items-center text-gray-400 hover:text-green-400 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M18 10c0 3.86-3.14 7-7 7a6.99 6.99 0 01-5.73-3.03l-2.28.85a.5.5 0 01-.62-.5V9.45a7 7 0 017.5-7.42A7 7 0 0118 10zm-5.73 3.03l2.28-.85a.5.5 0 01.62.5V10.55a6.5 6.5 0 00-7.39-7.1A6.5 6.5 0 004 10a6.5 6.5 0 006.5 6.5c2.47 0 4.67-1.39 5.77-3.47z" clip-rule="evenodd"></path>
        </svg>
        <span class="font-semibold">Comment</span>
        <span class="ml-1 text-sm">(245)</span>
      </button>

      <!-- Share Button with more complex hover -->
      <button class="flex items-center text-gray-400 hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105 group">
        <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M7.707 11.293a1 1 0 010-1.414L10.586 7 7.707 4.121a1 1 0 011.414-1.414L12 5.586l2.879-2.879a1 1 0 111.414 1.414L13.414 7l2.879 2.879a1 1 0 01-1.414 1.414L12 8.414l-2.879 2.879a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          <path fill-rule="evenodd" d="M12 17a1 1 0 100-2H7a1 1 0 100 2h5z" clip-rule="evenodd"></path>
        </svg>
        <span class="font-semibold">Share</span>
        <span class="ml-1 text-sm">(50)</span>
        <div class="absolute left-1/2 -ml-16 mt-12 p-3 bg-gray-700 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-lg">
          Share via:
          <div class="flex mt-2 space-x-2">
            <button class="px-3 py-1 rounded-full bg-blue-600 hover:bg-blue-700 transition duration-200">Facebook</button>
            <button class="px-3 py-1 rounded-full bg-blue-400 hover:bg-blue-500 transition duration-200">Twitter</button>
          </div>
        </div>
      </button>
    </div>

    <!-- Reaction Buttons (more complex) -->
    <div class="mt-8 pt-6 border-t border-gray-700 flex flex-wrap items-center justify-around">
      
      <button class="flex flex-col items-center text-gray-400 hover:text-yellow-400 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
        <span class="text-3xl">👍</span>
        <span class="text-sm mt-1">Like</span>
        <span class="text-xs">(800)</span>
      </button>

      <button class="flex flex-col items-center text-gray-400 hover:text-red-400 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
        <span class="text-3xl">❤️</span>
        <span class="text-sm mt-1">Love</span>
        <span class="text-xs">(300)</span>
      </button>

      <button class="flex flex-col items-center text-gray-400 hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
        <span class="text-3xl">😆</span>
        <span class="text-sm mt-1">Haha</span>
        <span class="text-xs">(150)</span>
      </button>

      <button class="flex flex-col items-center text-gray-400 hover:text-blue-500 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
        <span class="text-3xl">😮</span>
        <span class="text-sm mt-1">Wow</span>
        <span class="text-xs">(90)</span>
      </button>

      <button class="flex flex-col items-center text-gray-400 hover:text-orange-400 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
        <span class="text-3xl">😢</span>
        <span class="text-sm mt-1">Sad</span>
        <span class="text-xs">(40)</span>
      </button>

      <button class="flex flex-col items-center text-gray-400 hover:text-teal-400 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
        <span class="text-3xl">😡</span>
        <span class="text-sm mt-1">Angry</span>
        <span class="text-xs">(20)</span>
      </button>

    </div>

  </div>
</div>