CCHub Logo CCHub Tailwind Collection
구성 요소 태그 클라우드 태그 클라우드 구성 요소

태그 클라우드 구성 요소

Tailwind CSS를 사용하여 반응형 효과와 다크 모드를 지원하는 레트로/빈티지 태그 클라우드 구성 요소입니다.

미리 보기

HTML 코드 

<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Tag Cloud</h2>
  <div class="flex flex-wrap gap-2">
    <span class="bg-yellow-500 dark:bg-yellow-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Retro</span>
    <span class="bg-teal-500 dark:bg-teal-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Vintage</span>
    <span class="bg-fuchsia-500 dark:bg-fuchsia-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">80s</span>
    <span class="bg-purple-500 dark:bg-purple-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">90s</span>
    <span class="bg-pink-500 dark:bg-pink-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Nostalgia</span>
    <span class="bg-red-500 dark:bg-red-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Classic</span>
    <span class="bg-blue-500 dark:bg-blue-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Design</span>
    <span class="bg-green-500 dark:bg-green-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Style</span>
  </div>
</div>

관련 구성 요소

태그 클라우드 구성 요소 13

Neumorphism 스타일로 설계된 Tag Cloud 구성 요소입니다. 미묘한 그림자를 사용하여 배경에서 돌출되는 것처럼 보이는 요소가 있는 부드러운 UI 스타일이 특징입니다. 이 구성 요소는 반응형 디자인과 어두운 테마를 지원합니다.

열다

태그 클라우드 구성 요소

비즈니스 환경에 적합한 간단하고 깨끗하며 생생한 태그 클라우드 구성 요소로, 예약/예약 시스템을 위해 특별히 설계되었습니다. 반응이 빠르며 다크 모드 지원이 포함되어 있습니다.

열다

태그 클라우드 구성 요소

코드에서 영감을 받은 고정 폭 태그 클라우드 구성 요소로, 고대비 색상과 다크 모드를 지원하는 게임 웹 사이트를 위한 구성 요소입니다. 인터랙티브 태그가 있는 터미널과 같은 미학이 특징입니다.

열다