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

Badges 구성 요소

배지 구성 요소 - 반응형 효과와 어두운 테마를 지원하는 미니멀리스트/플랫 디자인. Tailwind를 사용하는 JavaScript, 순수 HTML 및 CSS가 없습니다.

미리 보기

HTML 코드 

<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"> Badge </span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"> Large Badge </span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"> Rounded Badge </span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
  <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-yellow-400" fill="currentColor" viewBox="0 0 8 8">
    <circle cx="4" cy="4" r="3" />
  </svg>
  Dot Badge
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200">
  <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-pink-400" fill="currentColor" viewBox="0 0 8 8">
    <circle cx="4" cy="4" r="3" />
  </svg>
  Dot Badge with long text that should wrap or truncate
</span>

관련 구성 요소

Badges 구성 요소

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

열다

Badges 구성 요소

전자 상거래를 위한 반응형 다크 모드 배지 구성 요소로, 보색과 인터랙티브 요소가 있는 다양한 배지를 보여줍니다.

열다

배지 구성 요소 - 3D 아날로그 대시보드

3D 디자인, 유사한 색 구성표, 적당한 복잡성 및 대시보드에 대한 어두운 테마 지원을 제공하는 반응형 Badges 구성 요소입니다. Tailwind CSS 클래스만 사용합니다.

열다