Like/Reaction Buttons 컴포넌트
반투명 요소와 흐림 효과가 있는 glassmorphism을 특징으로 하는 복잡한 웹 구성 요소입니다. 여기에는 비즈니스 웹사이트용으로 설계된 여러 대화형 요소가 포함되어 있으며 다크 모드를 지원합니다.
HTML 코드
<div class="flex flex-col items-center justify-center p-8 bg-gray-900 dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-md bg-opacity-30">
<div class="flex items-center space-x-4 mb-6">
<img src="https://picsum.photos/50/50" alt="User Avatar" class="w-12 h-12 rounded-full border border-white">
<span class="text-white text-lg font-semibold">Your Name</span>
</div>
<span class="text-white text-sm mb-4">How do you feel about this?</span>
<div class="flex space-x-4">
<button class="p-4 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 transition-all duration-300 text-white shadow-lg dark:bg-gradient-to-r dark:from-blue-700 dark:to-purple-800 dark:hover:from-blue-800 dark:hover:to-purple-900">
Like
</button>
<button class="p-4 rounded-lg bg-gradient-to-r from-yellow-400 to-orange-500 hover:from-yellow-500 hover:to-orange-600 transition-all duration-300 text-white shadow-lg dark:bg-gradient-to-r dark:from-yellow-500 dark:to-orange-600 dark:hover:from-yellow-600 dark:hover:to-orange-700">
Love
</button>
<button class="p-4 rounded-lg bg-gradient-to-r from-red-400 to-pink-500 hover:from-red-500 hover:to-pink-600 transition-all duration-300 text-white shadow-lg dark:bg-gradient-to-r dark:from-red-500 dark:to-pink-600 dark:hover:from-red-600 dark:hover:to-pink-700">
Angry
</button>
</div>
<div class="mt-6 flex items-center space-x-2">
<span class="text-white">Total Reactions:</span>
<span class="text-white font-bold">123</span>
</div>
</div>