구성 요소 좋아요/반응 버튼 Like/Reaction Buttons 컴포넌트

Like/Reaction Buttons 컴포넌트

반응형 좋아요/반응 버튼 컴포넌트는 Tailwind CSS를 사용하여 다크 모드를 지원합니다. 대시보드에 적합한 보색 구성표가 특징이며 대화형 반응 버튼에 대한 중간 정도의 복잡성을 제공합니다.

미리 보기

HTML 코드

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

Like/Reaction Buttons 컴포넌트

미리 보기

HTML 코드

관련 구성 요소

Like/Reaction Buttons 컴포넌트

스큐어모픽 라이크/리액션 버튼(Skeuomorphic Like/Reaction Buttons) 컴포넌트

Like/Reaction Buttons 컴포넌트