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

태그 클라우드 구성 요소

뉴모피즘(Neumorphism) 스타일로 디자인된 태그 클라우드 컴포넌트로, 전자상거래용 단색 구성표를 활용하고 반응형 디자인으로 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<div class="flex flex-wrap justify-center mt-10 p-5 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-lg">
    <h2 class="w-full text-2xl font-semibold text-center text-gray-800 dark:text-gray-200 mb-5">Explore Tags</h2>
    <div class="flex flex-wrap justify-center gap-4">
        <span class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-full shadow-md hover:shadow-lg transition-all cursor-pointer transform hover:-translate-y-1">Fashion</span>
        <span class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-full shadow-md hover:shadow-lg transition-all cursor-pointer transform hover:-translate-y-1">Electronics</span>
        <span class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-full shadow-md hover:shadow-lg transition-all cursor-pointer transform hover:-translate-y-1">Home & Living</span>
        <span class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-full shadow-md hover:shadow-lg transition-all cursor-pointer transform hover:-translate-y-1">Books</span>
        <span class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-full shadow-md hover:shadow-lg transition-all cursor-pointer transform hover:-translate-y-1">Beauty</span>
    </div>
</div>

관련 구성 요소

Retro Tag Cloud 구성 요소

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

열다

Luxury Tag Cloud 구성 요소

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

열다

태그 클라우드 구성 요소

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

열다