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

태그 클라우드 구성 요소

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

미리 보기

HTML 코드 

<div class="p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-900 rounded-lg shadow-lg max-w-4xl mx-auto font-sans">
  <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-white mb-6 text-center">Popular Categories & Services</h2>
  <div class="flex flex-wrap justify-center gap-3 sm:gap-4">
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-blue-600 hover:bg-blue-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-700 dark:hover:bg-blue-800">
      Consultation
    </button>
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-purple-600 hover:bg-purple-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75 dark:bg-purple-700 dark:hover:bg-purple-800">
      Meeting
    </button>
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-green-600 hover:bg-green-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 dark:bg-green-700 dark:hover:bg-green-800">
      Webinar
    </button>
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-yellow-600 hover:bg-yellow-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-700 dark:hover:bg-yellow-800">
      Workshop
    </button>
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-red-600 hover:bg-red-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75 dark:bg-red-700 dark:hover:bg-red-800">
      Demonstration
    </button>
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-orange-600 hover:bg-orange-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75 dark:bg-orange-700 dark:hover:bg-orange-800">
      Strategy Session
    </button>
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-teal-600 hover:bg-teal-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-75 dark:bg-teal-700 dark:hover:bg-teal-800">
      Training
    </button>
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-pink-600 hover:bg-pink-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75 dark:bg-pink-700 dark:hover:bg-pink-800">
      Support Call
    </button>
  </div>
</div>

관련 구성 요소

Bauhaus 태그 클라우드 구성 요소

Bauhaus에서 영감을 받은 디자인의 복잡하고 반응이 빠른 태그 클라우드 구성 요소로, 쿨 뉴트럴을 사용하여 다크 모드를 지원하는 교육용 플랫폼에 적합합니다.

열다

Glassmorphism 태그 클라우드 구성 요소

보라색/보라색 색 구성표가 있는 glassmorphism 스타일의 태그 클라우드 구성 요소로, 포트폴리오에 적합합니다. 반투명 반투명 요소, 반응형 디자인, 다크 모드 지원이 특징입니다.

열다

태그 클라우드 구성 요소

포트폴리오를 위해 설계된 뉴모픽 태그 클라우드 컴포넌트로, 단색 색 구성표, 반응형 레이아웃, Tailwind CSS를 사용한 다크 모드 지원이 있는 태그를 보여줍니다.

열다