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

태그 클라우드 구성 요소

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

미리 보기

HTML 코드 

<div class="flex flex-col justify-center items-center p-5 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-neumorphism">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Tag Cloud</h2>
    <div class="flex flex-wrap gap-4">
        <span class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg shadow-lg transition-transform transform hover:scale-105">Web Design</span>
        <span class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg shadow-lg transition-transform transform hover:scale-105">UI/UX</span>
        <span class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg shadow-lg transition-transform transform hover:scale-105">Graphic Design</span>
        <span class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg shadow-lg transition-transform transform hover:scale-105">Development</span>
        <span class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg shadow-lg transition-transform transform hover:scale-105">Branding</span>
        <span class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg shadow-lg transition-transform transform hover:scale-105">Photography</span>
    </div>
    <div class="mt-5 flex gap-4">
        <img src="https://picsum.photos/50?random=1" alt="Image 1" class="rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md">
        <img src="https://picsum.photos/50?random=2" alt="Image 2" class="rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md">
        <img src="https://picsum.photos/50?random=3" alt="Image 3" class="rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1" class="rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar 2" class="rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md">
    </div>
</div>

관련 구성 요소

태그 클라우드 구성 요소 13

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

열다

태그 클라우드 구성 요소

머티리얼 디자인 스타일, 보색 구성표, 전자 상거래용 중간 정도의 복잡성을 갖춘 반응형 Tag Cloud 구성 요소이며 어두운 테마를 지원합니다.

열다

태그 클라우드 구성 요소

마이크로 인터랙션이 있는 복잡하고 반응이 빠른 Tag Cloud 구성 요소로, 그레이스케일 색 구성표를 사용하여 대시보드용으로 설계되었습니다. 다크 모드를 지원합니다.

열다