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

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

ポートフォリオ用の複雑でレスポンシブな「いいね/リアクションボタン」コンポーネントで、ダークモードの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>

Like/Reaction Buttons コンポーネント

Tailwind CSS を使用したダークモードをサポートするレスポンシブな Like/Reaction Buttons コンポーネント。ダッシュボードに適した補色スキームが特徴で、インタラクティブなリアクションボタンには適度な複雑さがあります。

プレビューを開く

                <div class="flex items-center justify-center min-h-screen bg-gray-900">
  <div class="dark:bg-gray-800 p-4 rounded-lg shadow-xl">
    <div class="flex space-x-2">
      <!-- Like Button -->
      <button class="flex items-center space-x-1 p-2 rounded-full dark:bg-blue-600 text-white hover:dark:bg-blue-700 transition duration-300">
        <svg class="w-5 h-5" 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.14L18 17v-2.14a2 2 0 00-.857-1.857L14 10zM4 10h4.764a2 2 0 011.857 2.14L8 17v-2.14a2 2 0 00-.857-1.857L4 10zM9 16l-3 3m0 0l-3-3m3 3V4"></path></svg>
        <span>Like</span>
        <span class="dark:text-blue-200">1.2K</span>
      </button>

      <!-- Reactions Dropdown (simplified) -->
      <div class="relative group">
        <button class="flex items-center space-x-1 p-2 rounded-full dark:bg-green-600 text-white hover:dark:bg-green-700 transition duration-300">
          <svg class="w-5 h-5" 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 9v3m0 0v3m0-3h3m0 0H9m12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>React</span>
        </button>
        <!-- This dropdown would typically be controlled by JavaScript, but for HTML-only, it's always visible on hover for demonstration -->
        <div class="hidden group-hover:block absolute left-0 mt-2 w-48 dark:bg-gray-700 rounded-md shadow-lg py-1 z-10">
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">👍 Like</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">❤️ Love</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😂 Laugh</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😮 Wow</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😢 Sad</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😡 Angry</a>
        </div>
      </div>
    </div>
  </div>
</div>

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

ブルータリズムのデザイン、アースカラー、複雑なインタラクション、レスポンシブ、ダークテーマのサポートを備えたライク/リアクションボタンコンポーネント..JSはなく、Tailwindを使用した純粋なHTML。

プレビューを開く

                <div class="bg-stone-100 dark:bg-stone-900 p-8 min-h-screen flex items-center justify-center">
  <div class="bg-stone-200 dark:bg-stone-800 border-4 border-stone-900 dark:border-stone-100 p-6 rounded-none shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,0.5)] max-w-md w-full">
    <hさんがclass="text-2xl font-bold text-stone-900 dark:text-stone-100 mb-6 font-mono">React to this postさんが</h2>
    
    <div class="flex flex-wrap gap-4 justify-center">
      
      <!-- Like Button -->
      <button class="flex items-center space-x-2 bg-green-700 hover:bg-green-800 text-white font-bold py-3 px-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linear">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんのbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="Mさんが14 10h4.764a2 2 0 011.803 1.138l3.095 7.738A2 2 0 0122が 2さんがh-3V7a3 3 0 00-3-3H4a2 2 0 00-2 2v10a2 2 0 002 2h12M9 20h9さんの</path>
        </svg>
        <span>Like</span>
      </button>

      <!-- Love Button -->
      <button class="flex items-center space-x-2 bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linear">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんのbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M20.84 4. さんが12a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.さんが23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"></path>
        </svg>
        <span>Loveさんが</span>
      </button>

      <!-- Laugh Button -->
      <button class="flex items-center space-x-2 bg-yellow-700 hover:bg-yellow-800 text-white font-bold py-3 px-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linear">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんのbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="Mさんがさんと7h.01Mさんが2 7h.01Mさんの5 7h.01M21 12a9 9 0 さんの9 0 01-18 0z"></path>
        </svg>
        <span>Laughさん</span>
      </button>

      <!--さんが Angry Button -->
      <button class="flex items-さんenter space-x-2 bg-red-900 hover:bg-red-950 text-white font-bold py-さんとpx-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linearさんも">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんがbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="さんMさんが.732 14.597a4.995 4.995 0 00-.173-2.523c-.41-1.028-1.207-2.088-2.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.353-2.935a4.8 4.8 0 00-3.002-2.53m-1.067.895a5.003 5.003 0 01-1.5.242m1.067-.895a5.003 5.003 0 00-1.5.242m0 0.895a4.995 4.995 0 00-.173-2.523c-.41-1.028-1.207-2.088-2.353-2.935a4.8 4.8 0 00-3.002-2.53"></path>
        </svg>
        <span>Angry</span>
      </button>
      
      <!--さんの Sad Button -->
      <button class="flex items-center space-x-2 bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linear">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんのbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="さんMさんが.732 14.597a4.995 4.995 0 00-.173-2.523c-.41-1.028-1.207-2.088-2.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.353-2.935a4.8 4.8 0 00-3.002-2.53m-1.067.895a5.003 5.003 0 01-1.5.242m1.067-.895a5.003 5.003 0 00-1.5.242m0 0.895a4.995 4.995 0 00-.173-2.523c-.41-1.028-1.207-2.088-2.353-2.935a4.8 4.8 0 00-3.002-2.53"></path>
        </svg>
        <span>Sad</span>
      </button>

      <!--さんが Wow Button -->
      <button class="flex items-さんenter space-x-2 bg-orange-700 hover:bg-orange-800 text-white font-bold py-さんとpx-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linearさんが">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんのbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="さんがM-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-さんと0.84 4.さんが12a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.さんが23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"></path>
        </svg>
        <span>Wow</span>
      </button>
    
さんが </div>
  </div>
さん</div>

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

レトロ/ビンテージデザインのいいね/リアクションボタンコンポーネント

プレビューを開く

                <div class="flex items-center justify-center space-x-4 p-4 bg-gray-200 dark:bg-gray-800">
  <button class="flex items-center space-x-2 px-3 py-1 rounded-full bg-gray-300 text-gray-700 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition duration-300 ease-in-out">
    <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>Like</span>
  </button>

  <button class="flex items-center space-x-2 px-3 py-1 rounded-full bg-gray-300 text-gray-700 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition duration-300 ease-in-out">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path d="M10 2a6 6 0 00-6 6v3.586l1.707 1.707A3 3 0 017 14h6a3 3 0 012.293.707L16 11.586V8a6 6 0 00-6-6zM12 15.5a1 1 0 100 2h-4a1 1 0 100 2H7a1 1 0 100 2h6a3 3 0 003-3v-6a3 3 0 00-3-3h-2l-.45.45A4 4 0 0111 14H9a4 4 0 01-1.55-.45L7 13V8a4 4 0 014-4h2a4 4 0 014 4v6a4 4 0 01-4 4h-6.5a1.5 1.5 0 00-1.06.44L4 17.5V15a1 1 0 00-1-1h-.5a1.5 1.5 0 000 3H3v.5a1.5 1.5 0 001.5 1.5h8.086a2.5 2.5 0 011.768.732L15 20.5V21h1a1 1 0 100-2h-1v-.5a1.5 1.5 0 00-1.5-1.5z" />
    </svg>
    <span>React</span>
  </button>

</div>

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

複雑でレスポンシブなダークテーマ対応の Skeuomorphic Like/Reaction Buttons Component で、E コマース用の単色配色を使用しています。

プレビューを開く

                <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-800 p-4">
  <div class="flex items-center space-x-4">
    <!-- Like Button -->
    <button class="flex items-center justify-center px-4 py-2 rounded-full bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 shadow-lg hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1">
      <svg class="w-5 h-5 mr-2" 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>Like</span>
      <span class="ml-1 text-sm">(1.2k)</span>
    </button>

    <!-- Reaction Buttons Dropdown (Skeuomorphic Pop-up) -->
    <div class="relative group">
      <button class="flex items-center justify-center px-4 py-2 rounded-full bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 shadow-lg hover:shadow-xl focus:outline-none transition duration-300 ease-in-out transform hover:-translate-y-1">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
      </button>
      <div class="absolute bottom-full mb-2 left-1/2 transform -translate-x-1/2 w-64 p-4 rounded-xl shadow-2xl bg-gray-300 dark:bg-gray-700 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition duration-300 ease-in-out invisible group-hover:visible group-focus-within:visible scale-95 group-hover:scale-100 origin-bottom skeuomorphic-popup">
        <div class="grid grid-cols-4 gap-2">
          <!-- Sample Reactions (replace with actual icons/images) -->
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">👍</span>
          </button>
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">❤️</span>
          </button>
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">😂</span>
          </button>
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">😮</span>
          </button>
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">😢</span>
          </button>
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">😡</span>
          </button>
          </div>
      </div>
    </div>
  </div>
</div>

<style>
.skeuomorphic-popup {
  /* Basic Skeuomorphic effect using box-shadow for depth and highlights */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(255,255,255,0.5), 0 5px 15px rgba(0,0,0,0.3);
}

.dark .skeuomorphic-popup {
   box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), inset 0 -2px 4px rgba(70,70,70,0.3), 0 5px 15px rgba(0,0,0,0.5);
}
</style>

ニューモーフィズムライクリアクションボタン

Responsive Like/Reaction Buttons Componentは、ダークテーマのサポートとNeumorphismデザインを備えたブログ/コンテンツ用です。

プレビューを開く

                <div class="flex items-center justify-center p-4 dark:bg-gray-900">
  <div class="flex space-x-4">
    <!-- Like Button -->
    <button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-600 bg-gray-200 dark:text-gray-300 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <svg class="w-5 h-5" 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.808 2.808l-7.922 10.604a3 3 0 01-5.371 0L2.428 12.81a2 2 0 011.808-2.808H9M4 5h16a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V6a1 1 0 011-1z"></path></svg>
      <span>Like</span>
    </button>
    <!-- Celebrate Button -->
    <button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-600 bg-gray-200 dark:text-gray-300 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <svg class="w-5 h-5" 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="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18v-9"></path></svg>
      <span>Celebrate</span>
    </button>
    <!-- Insightful Button -->
    <button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-600 bg-gray-200 dark:text-gray-300 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <svg class="w-5 h-5" 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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m-.707 6.364l-.707-.707M12 20h1m-6.364-1.636l-.707.707M3 12H4m-.707-6.364l.707-.707M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m3 0h5M9 7h12a2 2 0 012 2v5a2 2 0 01-2 2H9m0-9v9m4-9v.01"></path></svg>
      <span>Insightful</span>
    </button>
  </div>
</div>

<style>
.shadow-neumorphic-light {
  box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-dark {
  box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #333333;
}
</style>

Like/Reaction Buttons コンポーネント

ダッシュボードに適した、マイクロインタラクション、類似の配色、レスポンシブデザイン、ダークテーマのサポートを備えた複雑な「いいね/リアクションボタン」コンポーネント。Tailwind CSSを使用し、魅力的なアニメーションを備えた複数のインタラクティブ要素が含まれています。

プレビューを開く

                <div class="flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4 min-h-screen">
  <div class="flex space-x-2">
    <!-- Primary Like Button -->
    <button class="flex items-center space-x-1 px-4 py-2 rounded-full bg-blue-500 text-white hover:bg-blue-600 transform transition-transform duration-200 hover:scale-105 focus:outline-none dark:bg-blue-700 dark:hover:bg-blue-800">
      <svg class="w-5 h-5" 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.667a2 2 0 002 2h2.983a2 2 0 001.828-1.154l3.913-7K11 2.167v1.833A2.5 2.5 0 008.5 6H5a2 2 0 00-2 2v2.333L6 10.333z"></path>
      </svg>
      <span>Like</span>
      <span class="text-sm">123</span>
    </button>


    <!-- Reaction Buttons - Example using emojis -->
    <div class="relative group">
      <button class="flex items-center space-x-1 px-4 py-2 rounded-full bg-green-500 text-white hover:bg-green-600 transform transition-transform duration-200 hover:scale-105 focus:outline-none dark:bg-green-700 dark:hover:bg-green-800">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smile">
          <circle cx="12" cy="12" r="10"></circle>
          <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
          <line x1="9" y1="9" x2="9.01" y2="9"></line>
          <line x1="15" y1="9" x2="15.01" y2="9"></line>
        </svg>
        <span>React</span>
      </button>
      

      <!-- Reaction Options (Hidden by default, shown on hover) -->
      <div class="absolute bottom-full mb-2 left-1/2 transform -translate-x-1/2 flex space-x-1 bg-white dark:bg-gray-800 p-2 rounded-full shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10">
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">👍</button>
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">❤️</button>
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😆</button>
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😮</button>
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😢</button>
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😡</button>
      </div>
    </div>

  </div>
</div>

Like/Reaction Buttons コンポーネント

Neumorphism スタイルの Like/Reaction ボタンコンポーネントで、複雑なデザインとダークモードをサポートするブログ用です。

プレビューを開く

                <div class="flex flex-col items-center justify-center p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">React to this Post</h2>
    <div class="grid grid-cols-3 gap-4">
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50" alt="Like" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Like</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=1" alt="Love" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Love</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=2" alt="Haha" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Haha</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=3" alt="Wow" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Wow</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=4" alt="Sad" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Sad</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=5" alt="Angry" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Angry</span>
        </button>
    </div>
</div>

Like/Reaction Buttons コンポーネント

企業のWebサイト向けに設計されたレトロ/ビンテージのいいね/リアクションボタンコンポーネントで、アースカラーとダークモードをサポートするレスポンシブデザインが特徴です。

プレビューを開く

                <div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-brown-800 dark:text-brown-300 mb-4">
        Share Your Reaction!
    </h2>
    <div class="flex space-x-4">
        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1005/50/50" alt="Like" class="mb-1 rounded-full" />
            <span>👍 Like</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1006/50/50" alt="Love" class="mb-1 rounded-full" />
            <span>❤️ Love</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1007/50/50" alt="Haha" class="mb-1 rounded-full" />
            <span>😂 Haha</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1008/50/50" alt="Wow" class="mb-1 rounded-full" />
            <span>😮 Wow</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1009/50/50" alt="Sad" class="mb-1 rounded-full" />
            <span>😢 Sad</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1010/50/50" alt="Angry" class="mb-1 rounded-full" />
            <span>😠 Angry</span>
        </button>
    </div>
</div>

Like/Reaction Buttons コンポーネント

マイクロインタラクションを念頭に置いて設計されたレスポンシブな「いいね/リアクション」ボタンコンポーネントは、モノクロの配色を使用し、ブログやコンテンツの消費に適しており、ダークテーマをサポートしています。

プレビューを開く

                <div class="flex flex-col items-center p-4 space-y-4 bg-gray-200 dark:bg-gray-800 rounded-md shadow-md">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Engage with this post!</h2>
    <div class="flex space-x-4">
        <button class="relative group p-2 rounded-full text-blue-600 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-600 transition duration-300 ease-in-out">
            <img src="https://picsum.photos/35/35" alt="Like" class="rounded-full">
            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Like</span>
        </button>
        <button class="relative group p-2 rounded-full text-green-600 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-600 transition duration-300 ease-in-out">
            <img src="https://picsum.photos/35/35" alt="Love" class="rounded-full">
            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Love</span>
        </button>
        <button class="relative group p-2 rounded-full text-red-600 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-600 transition duration-300 ease-in-out">
            <img src="https://picsum.photos/35/35" alt="Angry" class="rounded-full">
            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Angry</span>
        </button>
    </div>
    <p class="text-sm text-gray-600 dark:text-gray-400">Your reactions help us improve!</p>
</div>

カテゴリ

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