CCHub Logo CCHub Tailwind Collection
구성 요소 배지 파스텔 배지 다크 모드 UI

파스텔 배지 다크 모드 UI

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

미리 보기

HTML 코드 

<div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-900">
  <span class="px-3 py-1 text-sm font-medium text-purple-800 bg-purple-200 rounded-full dark:bg-purple-700 dark:text-purple-100">
    Business
  </span>
  <span class="px-3 py-1 text-sm font-medium text-green-800 bg-green-200 rounded-full dark:bg-green-700 dark:text-green-100">
    Corporate
  </span>
  <span class="px-3 py-1 text-sm font-medium text-blue-800 bg-blue-200 rounded-full dark:bg-blue-700 dark:text-blue-100">
    Innovation
  </span>
  <span class="px-3 py-1 text-sm font-medium text-pink-800 bg-pink-200 rounded-full dark:bg-pink-700 dark:text-pink-100">
    Strategy
  </span>
  <span class="px-3 py-1 text-sm font-medium text-yellow-800 bg-yellow-200 rounded-full dark:bg-yellow-700 dark:text-yellow-100">
    Growth
  </span>
</div>

관련 구성 요소

Microinteractions Badges 구성 요소

파스텔 색상의 복잡하고 반응이 빠른 배지 구성 요소로, 컨설팅/서비스를 위해 설계되었으며, 호버 마이크로 인터랙션 및 다크 모드 지원을 제공합니다. 각 배지는 호버링 시 약간 확장되어 더 많은 컨텍스트를 표시합니다.

열다

Badges 구성 요소

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

열다

Industrial_Candy_Finance_Badges_Component

금융/은행 업무를 위한 복잡한 배지 구성 요소로, 산업 미학과 밝은 사탕 색상이 조화를 이룹니다. 다양한 인터랙티브 배지, 반응형 디자인, 다크 모드 지원이 특징입니다.

열다