CCHub Logo CCHub Tailwind Collection
구성 요소 배지 레트로배지

레트로배지

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

미리 보기

HTML 코드 

<div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-900">
  <!-- Badge 1 -->
  <span class="px-3 py-1 text-sm font-semibold text-purple-800 bg-purple-200 rounded-full dark:text-purple-200 dark:bg-purple-800">
    Vintage Vibe
  </span>

  <!-- Badge 2 -->
  <span class="px-3 py-1 text-sm font-semibold text-yellow-800 bg-yellow-200 rounded-full dark:text-yellow-200 dark:bg-yellow-800">
    Retro Style
  </span>

  <!-- Badge 3 -->
  <span class="px-3 py-1 text-sm font-semibold text-green-800 bg-green-200 rounded-full dark:text-green-200 dark:bg-green-800">
    Classic Look
  </span>
</div>

관련 구성 요소

Badges 구성 요소

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

열다

파스텔 배지 다크 모드 UI

비즈니스 웹 사이트를 위한 간단하고 반응이 빠른 배지 구성 요소로, 파스텔 색상의 다크 모드 UI를 특징으로 합니다. Tailwind CSS로 설계된 이 제품은 어두운 배경을 사용하여 눈의 피로를 줄이고 반응형 레이아웃을 지원합니다.

열다

Badges 구성 요소

스큐어모피즘 스타일, 트라이어딕 색 구성표 및 단순한 복잡성을 갖춘 반응형 Badges 구성 요소로, 어두운 테마를 지원하는 포트폴리오를 위해 설계되었습니다.

열다