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

태그 클라우드 구성 요소

회색조 색상과 마이크로 인터랙션이 있는 반응형 Tag Cloud 구성 요소로, 어두운 테마를 지원하는 소셜 미디어 인터페이스를 위해 설계되었습니다.

미리 보기

HTML 코드 

<div class="container mx-auto px-4 py-8 dark:bg-gray-900">
  <div class="text-center mb-8">
    <h2 class="text-3xl font-bold text-gray-800 dark:text-white">Popular Tags</h2>
  </div>
  <div class="flex flex-wrap justify-center gap-4">
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#webdevelopment</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#tailwindcss</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#javascript</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#css3</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#html5</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#react</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#vuejs</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#angular</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#nodejs</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#python</span>
  </div>
</div>

관련 구성 요소

태그 클라우드 구성 요소(다크 모드, 파스텔)

어두운 모드를 지원하는 반응형 태그 클라우드 구성 요소로, 파스텔 색상을 사용합니다. 포트폴리오에 적합합니다.

열다

태그 클라우드 구성 요소

농업/농업 웹사이트를 위해 설계된 가을 색의 복잡한 산업 테마 태그 클라우드 구성 요소입니다. 다양한 대화형 요소, 완전한 응답성 및 다크 모드 지원이 특징입니다.

열다

태그 클라우드 구성 요소

비즈니스 및 기업 웹사이트를 위해 Bauhaus 원칙에 따라 설계된 단순하고 반응이 빠르며 생생한 태그 클라우드 구성 요소로, 기하학적 형태와 채도가 높은 기본 색상을 특징으로 하며 다크 모드를 지원합니다.

열다