Like/Reaction Buttons 컴포넌트
마이크로 인터랙션, 유사한 색 구성표, 반응형 디자인 및 어두운 테마 지원을 갖춘 복잡한 Like/Reaction Buttons 구성 요소로, 대시보드에 적합합니다. Tailwind CSS를 사용하고 매력적인 애니메이션과 함께 여러 대화형 요소를 포함합니다.
HTML 코드
<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 컴포넌트
레트로/빈티지 스타일의 Like/Reaction 버튼 구성 요소로, 어두운 테마 지원 및 반응형 디자인으로 반응을 위한 다양한 대화형 버튼을 제공합니다. 이 구성 요소는 대시보드에 적합하여 사용자가 인터페이스의 다양한 요소에 반응할 수 있도록 합니다.
Like/Reaction Buttons 컴포넌트
반응형 좋아요/반응 버튼 컴포넌트는 Tailwind CSS를 사용하여 다크 모드를 지원합니다. 대시보드에 적합한 보색 구성표가 특징이며 대화형 반응 버튼에 대한 중간 정도의 복잡성을 제공합니다.