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

Like/Reaction Buttons 컴포넌트

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

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white bg-opacity-30 dark:bg-gray-800 bg-clip-padding backdrop-filter backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg p-6 shadow-lg transition duration-300 ease-in-out hover:shadow-xl">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">React to this post!</h2>
        <div class="flex space-x-4">
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-blue-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=1" alt="Like" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Like</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-green-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=2" alt="Love" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Love</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-yellow-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=3" alt="Haha" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Haha</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-red-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=4" alt="Wow" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Wow</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-purple-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=5" alt="Sad" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Sad</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-gray-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=6" alt="Angry" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Angry</span>
            </button>
        </div>
    </div>
</div>

관련 구성 요소

스큐어모픽 라이크/리액션 버튼(Skeuomorphic Like/Reaction Buttons) 컴포넌트

복잡하고 반응이 빠르며 어두운 테마로 활성화된 Skeuomorphic Like/Reaction Buttons 컴포넌트는 전자 상거래를 위한 단색 색 구성표를 사용합니다.

열다

Like/Reaction Buttons 컴포넌트

마이크로 인터랙션, 유사한 색 구성표, 반응형 디자인 및 어두운 테마 지원을 갖춘 복잡한 Like/Reaction Buttons 구성 요소로, 대시보드에 적합합니다. Tailwind CSS를 사용하고 매력적인 애니메이션과 함께 여러 대화형 요소를 포함합니다.

열다

Like/Reaction Buttons 컴포넌트

Glassmorphism 스타일의 Like/Reaction Buttons 컴포넌트는 Tailwind CSS를 사용하여 반응형 효과와 다크 모드를 지원합니다.

열다