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

태그 클라우드 구성 요소

매력적인 애니메이션이 있는 반응형 태그 클라우드 구성 요소로, 포트폴리오에 적합한 단색 색 구성표를 사용합니다.

미리 보기

HTML 코드 

<div class="p-6 bg-gray-800 text-white dark:bg-gray-900">
    <h2 class="text-2xl font-semibold mb-4">Tag Cloud</h2>
    <div class="flex flex-wrap">
        <a href="#" class="m-2 p-3 bg-blue-600 hover:bg-blue-700 transition duration-300 ease-in-out rounded shadow-lg transform hover:scale-105">Web Design</a>
        <a href="#" class="m-2 p-3 bg-blue-600 hover:bg-blue-700 transition duration-300 ease-in-out rounded shadow-lg transform hover:scale-105">Development</a>
        <a href="#" class="m-2 p-3 bg-blue-600 hover:bg-blue-700 transition duration-300 ease-in-out rounded shadow-lg transform hover:scale-105">Photography</a>
        <a href="#" class="m-2 p-3 bg-blue-600 hover:bg-blue-700 transition duration-300 ease-in-out rounded shadow-lg transform hover:scale-105">Branding</a>
        <a href="#" class="m-2 p-3 bg-blue-600 hover:bg-blue-700 transition duration-300 ease-in-out rounded shadow-lg transform hover:scale-105">UI/UX</a>
        <a href="#" class="m-2 p-3 bg-blue-600 hover:bg-blue-700 transition duration-300 ease-in-out rounded shadow-lg transform hover:scale-105">Digital Marketing</a>
    </div>
</div>

관련 구성 요소

태그 클라우드 구성 요소

Tailwind CSS를 사용하여 스큐어모픽 스타일, 반응형 효과 및 어두운 테마 지원으로 설계된 태그 클라우드 구성 요소입니다.

열다

Retro Tag Cloud 구성 요소

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

열다

태그 클라우드 구성 요소 13

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

열다