CCHub Logo CCHub Tailwind Collection
구성 요소 배지 스큐어모픽 배지

스큐어모픽 배지

스큐어모픽 디자인, 보색 구성표 및 간단한 레이아웃이 있는 배지 세트로 블로그 또는 콘텐츠 사이트에 적합합니다. 다크 모드 지원으로 반응형.

미리 보기

HTML 코드 

<div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-800">
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-blue-800 bg-blue-200 border border-blue-400 shadow-lg dark:text-blue-200 dark:bg-blue-800 dark:border-blue-600">
    Skeuomorphism
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-green-800 bg-green-200 border border-green-400 shadow-lg dark:text-green-200 dark:bg-green-800 dark:border-green-600">
    Complementary
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-yellow-800 bg-yellow-200 border border-yellow-400 shadow-lg dark:text-yellow-200 dark:bg-yellow-800 dark:border-yellow-600">
    Simple
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-red-800 bg-red-200 border border-red-400 shadow-lg dark:text-red-200 dark:bg-red-800 dark:border-red-600">
    Blog
  </span>
</div>

관련 구성 요소

Badges 구성 요소

어스 톤을 사용하는 3D 스타일로 디자인된 반응형 배지 구성 요소로, 대시보드에 적합한 대화형 요소를 제공합니다.

열다

Badges 구성 요소

대시보드용 미니멀리스트 배지 구성 요소로, 어스 톤과 다크 모드 지원을 제공합니다.

열다

Badges 구성 요소

회색조 색 구성표가 있는 복고풍 테마의 배지 구성 요소로, 블로그 또는 콘텐츠 사이트에 적합합니다. 여러 대화형 요소와 완전한 반응성을 특징으로 하며 다크 모드를 지원합니다. 이 디자인은 HTML과 Tailwind CSS에만 의존하여 JavaScript를 피합니다.

열다