Like/Reaction Buttons 컴포넌트
반응형 좋아요/반응 버튼 구성 요소는 마이크로 인터랙션을 염두에 두고 설계되었으며, 블로그 및 콘텐츠 소비에 적합한 단색 색 구성표를 사용하며 어두운 테마를 지원합니다.
HTML 코드
<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>관련 구성 요소
Like/Reaction Buttons 컴포넌트
반투명 요소와 흐림 효과가 있는 glassmorphism을 특징으로 하는 복잡한 웹 구성 요소입니다. 여기에는 비즈니스 웹사이트용으로 설계된 여러 대화형 요소가 포함되어 있으며 다크 모드를 지원합니다.
Retro_Reaction_Buttons_Industrial
복고풍 산업 미학을 지닌 간단하고 반응이 빠른 좋아요/반응 버튼 구성 요소로 제조 또는 산업 회사 웹사이트에 적합합니다.
Like/Reaction Buttons 컴포넌트
마이크로 인터랙션이 있는 좋아요 및 반응 버튼을 특징으로 하는 웹 구성 요소이며 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.