HTML 코드
<div class="flex items-center justify-center space-x-4 p-4 bg-gray-200 dark:bg-gray-800">
<button class="flex items-center space-x-2 px-3 py-1 rounded-full bg-gray-300 text-gray-700 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition duration-300 ease-in-out">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
</svg>
<span>Like</span>
</button>
<button class="flex items-center space-x-2 px-3 py-1 rounded-full bg-gray-300 text-gray-700 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition duration-300 ease-in-out">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M10 2a6 6 0 00-6 6v3.586l1.707 1.707A3 3 0 017 14h6a3 3 0 012.293.707L16 11.586V8a6 6 0 00-6-6zM12 15.5a1 1 0 100 2h-4a1 1 0 100 2H7a1 1 0 100 2h6a3 3 0 003-3v-6a3 3 0 00-3-3h-2l-.45.45A4 4 0 0111 14H9a4 4 0 01-1.55-.45L7 13V8a4 4 0 014-4h2a4 4 0 014 4v6a4 4 0 01-4 4h-6.5a1.5 1.5 0 00-1.06.44L4 17.5V15a1 1 0 00-1-1h-.5a1.5 1.5 0 000 3H3v.5a1.5 1.5 0 001.5 1.5h8.086a2.5 2.5 0 011.768.732L15 20.5V21h1a1 1 0 100-2h-1v-.5a1.5 1.5 0 00-1.5-1.5z" />
</svg>
<span>React</span>
</button>
</div>
관련 구성 요소
아날로그 다크 모드 좋아요/반응 버튼
복잡한 반응형 좋아요/반응 버튼 컴포넌트로, 다크 모드 UI와 유사한 색 구성표가 있는 포트폴리오로, 순수 HTML 및 Tailwind CSS를 사용하여 구현됩니다. Tailwind의 dark: 접두사를 통해 다크 모드를 지원합니다.
Like/Reaction Buttons 컴포넌트
Glassmorphism 디자인 스타일의 Like/Reaction Buttons 컴포넌트로, Tailwind CSS를 사용하여 젖빛 유리 효과, 반응형 디자인, 어두운 테마 지원을 특징으로 합니다.
스큐어모픽 반응 버튼
스큐어모픽 디자인 스타일의 좋아요 및 반응 버튼 세트로, 반응형 레이아웃과 다크 모드를 지원합니다. 버튼은 JavaScript 없이 HTML 및 Tailwind CSS로만 구현됩니다. 다크 모드는 CSS 클래스를 통해 처리됩니다. 자리 표시자 이미지는 아바타에 사용됩니다.