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

Like/Reaction Buttons 컴포넌트

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

미리 보기

HTML 코드

<div class="flex justify-center items-center space-x-4 p-6 bg-white bg-opacity-10 backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-30">
    <div class="flex items-center space-x-2">
        <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-lg text-gray-900 dark:text-white">Like</span>
    </div>
    <button class="flex items-center p-2 text-white bg-blue-500 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 focus:outline-none">
        <span class="material-icons"> thumb_up </span>
    </button>
    <button class="flex items-center p-2 text-white bg-red-500 rounded-full transition duration-300 ease-in-out hover:bg-red-600 focus:outline-none">
        <span class="material-icons"> favorite </span>
    </button>
    <button class="flex items-center p-2 text-white bg-yellow-500 rounded-full transition duration-300 ease-in-out hover:bg-yellow-600 focus:outline-none">
        <span class="material-icons"> sentiment_satisfied </span>
    </button>
</div>

<style>
    /* Add Material Icons font link */
    @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
</style>

관련 구성 요소

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

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

열다

Like/Reaction Buttons 컴포넌트

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

열다

사이버펑크라이크리액션버튼

마켓플레이스를 위한 단순하고 반응이 빠른 좋아요/반응 버튼 구성 요소로, 오션 블루 톤과 다크 모드 지원으로 사이버펑크 미학을 특징으로 합니다.

열다