Like/Reaction Buttons 컴포넌트
Neumorphism 스타일의 Like/Reaction buttons 구성 요소는 복잡한 디자인과 다크 모드를 지원하는 블로그를 위한 것입니다.
HTML 코드
<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 컴포넌트
스큐어모픽 스타일로 디자인된 좋아요 및 반응 버튼을 특징으로 하는 웹 구성 요소로, Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원합니다.
Like/Reaction Buttons 컴포넌트
Tailwind CSS와 함께 Brutalism 스타일로 디자인된 Like/Reaction Buttons 구성 요소로, 반응형 효과와 어두운 테마 지원을 특징으로 합니다.
Like/Reaction Buttons 컴포넌트
마이크로 인터랙션, 유사한 색 구성표, 반응형 디자인 및 어두운 테마 지원을 갖춘 복잡한 Like/Reaction Buttons 구성 요소로, 대시보드에 적합합니다. Tailwind CSS를 사용하고 매력적인 애니메이션과 함께 여러 대화형 요소를 포함합니다.