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

태그 클라우드 구성 요소

Tailwind CSS를 사용하여 Neumorphism 디자인 스타일, 반응형 효과 및 어두운 테마를 지원하는 태그 클라우드 구성 요소입니다.

미리 보기

HTML 코드 

<div class="p-8 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-lg">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-100">Tag Cloud</h2>
    <div class="flex flex-wrap gap-4">
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">HTML</span>
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">CSS</span>
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">JavaScript</span>
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">React</span>
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Tailwind CSS</span>
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Neumorphism</span>
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">UI Design</span>
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Web Development</span>
    </div>
</div>

관련 구성 요소

Luxury Tag Cloud 구성 요소

전문 컨설팅 서비스를 위해 설계된 우아하고 반응이 빠른 태그 클라우드 구성 요소로, 일몰/따뜻한 색조와 다크 모드를 지원하는 럭셔리/프리미엄 미학을 특징으로 합니다.

열다

Retro Tag Cloud 구성 요소

Tailwind CSS를 사용하는 반응형 태그 클라우드 구성 요소로, 레트로/빈티지 디자인 미학, 파스텔 색 구성표 및 단순한 복잡성을 갖추고 있습니다. 다크 모드 지원을 포함한 포트폴리오에 적합합니다.

열다

태그 클라우드 구성 요소

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

열다