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

Like/Reaction Buttons 컴포넌트

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

미리 보기

HTML 코드 

<div class="flex flex-col items-center p-4 bg-stone-200 dark:bg-stone-800 font-mono">

  <!-- Like Button -->
  <button class="flex items-center justify-center px-6 py-3 mb-4 text-lg font-bold text-stone-900 uppercase bg-stone-400 border-t-4 border-l-4 border-b-0 border-r-0 border-stone-900 dark:text-stone-100 dark:bg-stone-700 dark:border-stone-100">
    <svg class="w-6 h-6 mr-2" 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 10h4v6m0 0l-4 4m4-4L8 4m7 10l-2 2m0 0l-2-2m2 2l2 2"></path></svg>
    Like (120)
  </button>

  <!-- Reactions -->
  <div class="flex space-x-4">
    <button class="p-3 text-xl bg-stone-500 border-t-2 border-l-2 border-b-0 border-r-0 border-stone-900 dark:bg-stone-600 dark:border-stone-100">👍 50</button>
    <button class="p-3 text-xl bg-stone-500 border-t-2 border-l-2 border-b-0 border-r-0 border-stone-900 dark:bg-stone-600 dark:border-stone-100">😂 30</button>
    <button class="p-3 text-xl bg-stone-500 border-t-2 border-l-2 border-b-0 border-r-0 border-stone-900 dark:bg-stone-600 dark:border-stone-100">😢 10</button>
    <button class="p-3 text-xl bg-stone-500 border-t-2 border-l-2 border-b-0 border-r-0 border-stone-900 dark:bg-stone-600 dark:border-stone-100">😍 25</button>
  </div>

</div>

관련 구성 요소

Art Deco Like/Reaction Buttons 컴포넌트

아르데코 미학을 가진 간단하고 반응이 빠른 유사/반응 버튼 세트로, 스포츠/피트니스 애플리케이션에 적합합니다. 웜 뉴트럴 및 다크 모드 지원이 특징입니다.

열다

좋아요/반응 버튼

Like/Reaction Buttons Microinteractions, Complementary color scheme, Simple complexity, for social media 목적의 구성 요소.

열다

Like/Reaction Buttons 컴포넌트

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

열다