검색 구성 요소

카테고리

구성 요소 태그 클라우드

태그 클라우드

content tags 또는 categories의 시각적 표현

태그 클라우드 구성 요소

Tailwind CSS를 사용하여 반응형 효과와 다크 모드를 지원하는 레트로/빈티지 태그 클라우드 구성 요소입니다.

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Tag Cloud</h2>
  <div class="flex flex-wrap gap-2">
    <span class="bg-yellow-500 dark:bg-yellow-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Retro</span>
    <span class="bg-teal-500 dark:bg-teal-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Vintage</span>
    <span class="bg-fuchsia-500 dark:bg-fuchsia-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">80s</span>
    <span class="bg-purple-500 dark:bg-purple-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">90s</span>
    <span class="bg-pink-500 dark:bg-pink-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Nostalgia</span>
    <span class="bg-red-500 dark:bg-red-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Classic</span>
    <span class="bg-blue-500 dark:bg-blue-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Design</span>
    <span class="bg-green-500 dark:bg-green-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Style</span>
  </div>
</div>

태그 클라우드 구성 요소

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

열다 미리 보기

                <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>

태그 클라우드 구성 요소

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

열다 미리 보기

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl">
    <h2 class="text-xl font-semibold mb-4">Tag Cloud</h2>
    <div class="flex flex-wrap gap-2">
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Web Development</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Design</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">SEO</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Marketing</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Programming</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Networking</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Cloud Computing</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Data Science</a>
    </div>
</div>

태그 클라우드 구성 요소 13

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

열다 미리 보기

                <div class="flex flex-wrap justify-center p-8 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-lg">
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 1
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 2
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 3
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 4
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 5
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 6
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 7
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 8
        </a>
    </div>
</div>

<style>
    .shadow-neumorphism {
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1),
                    -10px -10px 20px rgba(255, 255, 255, 0.5);
    }
</style>