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

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 컴포넌트

반응형 좋아요/반응 버튼 구성 요소는 마이크로 인터랙션을 염두에 두고 설계되었으며, 블로그 및 콘텐츠 소비에 적합한 단색 색 구성표를 사용하며 어두운 테마를 지원합니다.

열다

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

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

열다

Like/Reaction Buttons 컴포넌트

Like/Reaction Buttons Tailwind CSS를 사용하여 HTML로 코딩된 구성 요소, Brutalism 디자인, Earth tones 색 구성표 및 전자 상거래에 적합한 중간 수준의 복잡성을 사용합니다. 반응형 디자인과 다크 모드 지원이 포함됩니다.

열다