CCHub Logo CCHub Tailwind Collection
구성 요소 배지 Badges 구성 요소

Badges 구성 요소

배지: 전자 상거래를 위한 반응형 어두운 테마를 지원하는 구성 요소입니다.

미리 보기

HTML 코드 

<div class="flex justify-center items-center h-screen bg-gray-800 dark:bg-gray-900">
  <div class="flex flex-wrap gap-2 p-4 rounded-lg bg-gray-700 dark:bg-gray-800">
    <span class="px-3 py-1 text-sm font-semibold text-amber-100 bg-amber-600 rounded-full dark:bg-amber-700 dark:text-amber-200">New Arrival</span>
    <span class="px-3 py-1 text-sm font-semibold text-teal-100 bg-teal-600 rounded-full dark:bg-teal-700 dark:text-teal-200">Top Rated</span>
    <span class="px-3 py-1 text-sm font-semibold text-fuchsia-100 bg-fuchsia-600 rounded-full dark:bg-fuchsia-700 dark:text-fuchsia-200">Limited Stock</span>
    <span class="px-3 py-1 text-sm font-semibold text-orange-100 bg-orange-600 rounded-full dark:bg-orange-700 dark:text-orange-200">On Sale</span>
    <span class="px-3 py-1 text-sm font-semibold text-rose-100 bg-rose-600 rounded-full dark:bg-rose-700 dark:text-rose-200">Bestseller</span>
  </div>
</div>

관련 구성 요소

Financial Badges 구성 요소

미니멀하고 평평한 디자인의 금융 배지 구성 요소는 오션/블루 톤을 사용하여 금융 및 은행 인터페이스에 적합합니다. 반응형 디자인과 다크 모드 지원이 특징입니다.

열다

Badges 구성 요소

유사한 색 구성표와 풍부한 인터페이스를 가진 블로그를 위한 Neumorphism 스타일 배지 구성 요소입니다.

열다

Badges 구성 요소

Glassmorphism 스타일로 디자인된 반응형 Badges 구성 요소로, 젖빛 유리와 같은 반투명 요소와 흐림 효과를 특징으로 하며 다크 모드를 지원합니다.

열다