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

Like/Reaction Buttons 컴포넌트

어두운 테마 지원 및 반응형 효과가 있는 Tailwind CSS를 사용하는 3D 디자인 좋아요/반응 버튼 구성 요소입니다.

미리 보기

HTML 코드 

<div class="flex justify-center items-center space-x-4 p-8 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md transform transition-transform duration-200 hover:scale-105">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
        <button class="mt-2 px-4 py-2 text-sm font-bold text-white bg-blue-500 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-500">Like</button>
    </div>
    <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md transform transition-transform duration-200 hover:scale-105">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" /> 
        <button class="mt-2 px-4 py-2 text-sm font-bold text-white bg-pink-500 rounded hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-500">Love</button>
    </div>
    <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md transform transition-transform duration-200 hover:scale-105">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
        <button class="mt-2 px-4 py-2 text-sm font-bold text-white bg-yellow-500 rounded hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-500">Wow</button>
    </div>
    <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md transform transition-transform duration-200 hover:scale-105">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" />
        <button class="mt-2 px-4 py-2 text-sm font-bold text-white bg-green-500 rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-500">Haha</button>
    </div>
</div>

관련 구성 요소

Like/Reaction Buttons 컴포넌트

Neumorphism 스타일의 Like/Reaction buttons 구성 요소는 복잡한 디자인과 다크 모드를 지원하는 블로그를 위한 것입니다.

열다

Art Deco Like/Reaction Buttons 컴포넌트

아르데코 미학을 가진 간단하고 반응이 빠른 유사/반응 버튼 세트로, 스포츠/피트니스 애플리케이션에 적합합니다. 웜 뉴트럴 및 다크 모드 지원이 특징입니다.

열다

Like/Reaction Buttons 컴포넌트

Glassmorphism 디자인 스타일의 Like/Reaction Buttons 컴포넌트로, Tailwind CSS를 사용하여 젖빛 유리 효과, 반응형 디자인, 어두운 테마 지원을 특징으로 합니다.

열다