Componentes de búsqueda

Categorías

Componentes Botones Me gusta/Reacción

Botones Me gusta/Reacción

Botones para expresar reacciones al contenido

Monospace_Developer_Reaction_Buttons

Un componente de botones de reacción/me gusta simple y receptivo inspirado en la estética monoespaciada/de desarrollador con un esquema de color retro/vintage, adecuado para sitios web de noticias y periodismo. Incluye soporte para modo oscuro.

Abrir Vista previa

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

CyberpunkLikeReactionButtons

Un componente de botones de me gusta/reacción simple y receptivo para un mercado, con una estética cyberpunk con tonos azul océano y soporte para modo oscuro.

Abrir Vista previa

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

Componente de botones de reacción/Me gusta Art Deco

Un conjunto simple y sensible de botones de me gusta/reacción con una estética Art Deco, adecuado para aplicaciones deportivas/fitness. Cuenta con neutros cálidos y compatibilidad con el modo oscuro.

Abrir Vista previa

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

Botones de reacción de juegos retro

Un componente complejo de botón de reacción de temática retro para sitios web de juegos, con 'me gusta' y otros tipos de reacción con recuentos, diseñado con colores otoñales y capacidad de respuesta completa, incluida la compatibilidad con el modo oscuro.

Abrir Vista previa

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

Botones neumórficos de reacción/tipo

Un conjunto simple y receptivo de botones de me gusta/reacción con un estilo de diseño neumórfico, combinación de colores en tono joya y compatibilidad con modo oscuro, adecuado para interfaces financieras/bancarias.

Abrir Vista previa

                <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

Componente de botones de me gusta/reacción simple y receptivo con una estética industrial retro, adecuado para sitios web de empresas industriales o de fabricación.

Abrir Vista previa

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

Componente de botones Me gusta/Reacción

Un conjunto complejo y minimalista de botones de reacción para una plataforma de música/audio, con colores vibrantes, compatibilidad con modo oscuro y capacidad de respuesta completa.

Abrir Vista previa

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

Componente de botones Me gusta/Reacción

Un componente de botones de me gusta/reacción complejo, receptivo y monocromático con animaciones centradas en la microinteracción para sitios web comerciales/corporativos, que admite el tema oscuro.

Abrir Vista previa

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

Componente de botones de reacción/Me gusta de Glassmorphism

Componente de botones de reacción/me gusta de Glassmorphism para portafolio - Tema simple, responsivo y oscuro

Abrir Vista previa

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

Botones análogos de Like/Reacción en modo oscuro

Un componente de botones de Me gusta/Reacción complejo y receptivo para un portafolio, con una interfaz de usuario de modo oscuro y un esquema de color análogo, implementado utilizando HTML puro y CSS de Tailwind. Es compatible con el modo oscuro a través del prefijo dark: de Tailwind.

Abrir Vista previa

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