뉴모피즘LikeReactionButtons
Responsive Like/Reaction Buttons 어두운 테마 지원 및 Neumorphism 디자인이 있는 블로그/콘텐츠를 위한 구성 요소입니다.
HTML 코드
<div class="flex items-center justify-center p-4 dark:bg-gray-900">
<div class="flex space-x-4">
<!-- Like Button -->
<button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-600 bg-gray-200 dark:text-gray-300 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.808 2.808l-7.922 10.604a3 3 0 01-5.371 0L2.428 12.81a2 2 0 011.808-2.808H9M4 5h16a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V6a1 1 0 011-1z"></path></svg>
<span>Like</span>
</button>
<!-- Celebrate Button -->
<button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-600 bg-gray-200 dark:text-gray-300 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18v-9"></path></svg>
<span>Celebrate</span>
</button>
<!-- Insightful Button -->
<button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-600 bg-gray-200 dark:text-gray-300 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m-.707 6.364l-.707-.707M12 20h1m-6.364-1.636l-.707.707M3 12H4m-.707-6.364l.707-.707M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m3 0h5M9 7h12a2 2 0 012 2v5a2 2 0 01-2 2H9m0-9v9m4-9v.01"></path></svg>
<span>Insightful</span>
</button>
</div>
</div>
<style>
.shadow-neumorphic-light {
box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #333333;
}
</style>
관련 구성 요소
Like/Reaction Buttons 컴포넌트
Tailwind CSS와 함께 Brutalism 스타일로 디자인된 Like/Reaction Buttons 구성 요소로, 반응형 효과와 어두운 테마 지원을 특징으로 합니다.
스큐어모픽 반응 버튼
스큐어모픽 디자인 스타일의 좋아요 및 반응 버튼 세트로, 반응형 레이아웃과 다크 모드를 지원합니다. 버튼은 JavaScript 없이 HTML 및 Tailwind CSS로만 구현됩니다. 다크 모드는 CSS 클래스를 통해 처리됩니다. 자리 표시자 이미지는 아바타에 사용됩니다.
Retro_Reaction_Buttons_Industrial
복고풍 산업 미학을 지닌 간단하고 반응이 빠른 좋아요/반응 버튼 구성 요소로 제조 또는 산업 회사 웹사이트에 적합합니다.