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>
관련 구성 요소
좋아요/반응 버튼
브루탈리즘 디자인, 어스 톤, 복잡한 상호 작용, 반응형, 어두운 테마 지원이 있는 좋아요/반응 버튼 구성 요소.. JS 없음, Tailwind가 있는 순수한 HTML.
Like/Reaction Buttons 컴포넌트
Like/Reaction Buttons Tailwind CSS를 사용하여 HTML로 코딩된 구성 요소, Brutalism 디자인, Earth tones 색 구성표 및 전자 상거래에 적합한 중간 수준의 복잡성을 사용합니다. 반응형 디자인과 다크 모드 지원이 포함됩니다.
Like/Reaction Buttons 컴포넌트
기업 웹사이트용으로 설계된 레트로/빈티지 좋아요/반응 버튼 구성 요소로, 어스 톤과 다크 모드를 지원하는 반응형 디자인이 특징입니다.