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

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

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

미리 보기

HTML 코드 

<div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">

  <!-- Badge 1 -->
  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-teal-400 to-teal-600 text-white shadow-md dark:from-teal-600 dark:to-teal-800">
    <svg class="w-4 h-4 mr-1" 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="M5 13l4 4L19 7"></path></svg>
    Completed
  </span>

  <!-- Badge 2 -->
  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-red-400 to-red-600 text-white shadow-md dark:from-red-600 dark:to-red-800">
    <svg class="w-4 h-4 mr-1" 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="M6 18L18 6M6 6l12 12"></path></svg>
    Failed
  </span>

  <!-- Badge 3 -->
  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-yellow-400 to-yellow-600 text-white shadow-md dark:from-yellow-600 dark:to-yellow-800">
    <svg class="w-4 h-4 mr-1" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    Pending
  </span>

  <!-- Badge 4 - Example with icon and no text -->
    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-blue-400 to-blue-600 text-white shadow-md dark:from-blue-600 dark:to-blue-800">
    <svg class="w-4 h-4" 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="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
  </span>

</div>

관련 구성 요소

배지 구성 요소 - 다크 모드 어스 톤

다크 모드 블로그/콘텐츠 인터페이스를 위해 어스 톤으로 설계된 복잡한 배지 구성 요소 시스템입니다. 구성 요소에는 아티클 카테고리, 사용자 상태, 콘텐츠 태그, 알림 및 성과 지표에 대한 다양한 배지 유형이 포함되어 있습니다. 모두 다크 모드를 지원하는 자연스러운 어스 톤 색상을 사용합니다. 디자인은 완벽하게 반응하며 다양한 화면 크기에 맞게 조정됩니다.

열다

Financial Badges 구성 요소

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

열다

레트로배지

Retro/Vintage Badges 보색 구성표가 있는 비즈니스/기업 웹사이트를 위한 구성 요소. 심플한 레이아웃, 어두운 테마를 지원하는 반응형 디자인. 자바스크립트가 없습니다.

열다