검색 구성 요소

카테고리

구성 요소 태그 클라우드

태그 클라우드

content tags 또는 categories의 시각적 표현

태그 클라우드 구성 요소

그레이스케일의 Neumorphism 스타일로 디자인된 태그 클라우드 구성 요소로, 블로그 및 콘텐츠 소비에 적합하며 대화형 요소를 제공합니다.

                <div class="flex flex-col items-center justify-center p-5 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Tag Cloud</h2>
    <div class="flex flex-wrap justify-center gap-4">
        <a href="#" class="bg-white dark:bg-gray-900 rounded-full px-4 py-2 text-gray-800 dark:text-gray-200 shadow-md transform transition hover:scale-105 hover:shadow-lg focus:outline-none">
            Web Development
        </a>
        <a href="#" class="bg-white dark:bg-gray-900 rounded-full px-4 py-2 text-gray-800 dark:text-gray-200 shadow-md transform transition hover:scale-105 hover:shadow-lg focus:outline-none">
            UI/UX Design
        </a>
        <a href="#" class="bg-white dark:bg-gray-900 rounded-full px-4 py-2 text-gray-800 dark:text-gray-200 shadow-md transform transition hover:scale-105 hover:shadow-lg focus:outline-none">
            JavaScript
        </a>
        <a href="#" class="bg-white dark:bg-gray-900 rounded-full px-4 py-2 text-gray-800 dark:text-gray-200 shadow-md transform transition hover:scale-105 hover:shadow-lg focus:outline-none">
            React
        </a>
        <a href="#" class="bg-white dark:bg-gray-900 rounded-full px-4 py-2 text-gray-800 dark:text-gray-200 shadow-md transform transition hover:scale-105 hover:shadow-lg focus:outline-none">
            Tailwind CSS
        </a>
        <a href="#" class="bg-white dark:bg-gray-900 rounded-full px-4 py-2 text-gray-800 dark:text-gray-200 shadow-md transform transition hover:scale-105 hover:shadow-lg focus:outline-none">
            Neumorphism
        </a>
        <a href="#" class="bg-white dark:bg-gray-900 rounded-full px-4 py-2 text-gray-800 dark:text-gray-200 shadow-md transform transition hover:scale-105 hover:shadow-lg focus:outline-none">
            Blogging
        </a>
    </div>
</div>

태그 클라우드 구성 요소

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

열다 미리 보기

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

Neumorphism 태그 클라우드 구성 요소

Neumorphism 디자인, 파스텔 색 구성표 및 복잡한 상호 작용을 갖춘 반응형 Tag Cloud 구성 요소로, 전자 상거래에 맞게 조정되었습니다. 다크 모드 지원이 포함되며 Tailwind CSS를 사용합니다.

열다 미리 보기

                <div class="p-4 dark:bg-gray-800">
  <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
    <div class="col-span-2 md:col-span-3 lg:col-span-4 text-center text-lg font-semibold text-gray-700 dark:text-gray-300">Popular Tags</div>
    
    <div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-lg shadow-neumorphism-light dark:shadow-neumorphism-dark flex flex-wrap gap-2 justify-center">
      <span class="bg-pastel-blue text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Electronics</span>
      <span class="bg-pastel-green text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Apparel</span>
      <span class="bg-pastel-pink text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Home & Garden</span>
      <span class="bg-pastel-yellow text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Books</span>
      <span class="bg-pastel-purple text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Toys & Games</span>
      <span class="bg-pastel-blue text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Beauty</span>
      <span class="bg-pastel-green text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Sports</span>
      <span class="bg-pastel-pink text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Outdoors</span>
      <span class="bg-pastel-yellow text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Automotive</span>
      <span class="bg-pastel-purple text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Jewelry</span>
    </div>
  </div>
</div>


<style>
  .shadow-neumorphism-light {
    box-shadow: 5px 5px 10px #babecc, -5px -5px 10px #f2f3f7;
  }
  .dark .shadow-neumorphism-dark {
    box-shadow: 5px 5px 10px #333, -5px -5px 10px #555;
  }
  .shadow-inner-neumorphism-light {
    box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #f2f3f7;
  }
  .dark .shadow-inner-neumorphism-dark {
     box-shadow: inset 2px 2px 5px #333, inset -5px -5px 10px #555;
  }
  .hover\:shadow-outer-neumorphism-light:hover {
    box-shadow: 5px 5px 10px #babecc, -5px -5px 10px #f2f3f7;
  }
   .dark .hover\:shadow-outer-neumorphism-dark:hover {
    box-shadow: 5px 5px 10px #333, -5px -5px 10px #555;
  }
  .bg-pastel-blue { background-color: #a7c7e7; }
  .bg-pastel-green { background-color: #b2dfdb; }
  .bg-pastel-pink { background-color: #f8c8dc; }
  .bg-pastel-yellow { background-color: #ffecb3; }
  .bg-pastel-purple { background-color: #e1bee7; }
</style>

태그 클라우드 구성 요소

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

열다 미리 보기

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

태그 클라우드 구성 요소

소셜 미디어용으로 설계된 반응형 Tag Cloud 구성 요소는 다크 모드 UI 및 파스텔 색상 구성표와 함께 인터페이스합니다.

열다 미리 보기

                <div class="bg-gray-900 text-gray-200 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
  <h2 class="text-2xl font-bold mb-4">Explore Tags</h2>
  <div class="flex flex-wrap">
    <span class="bg-pink-300 text-gray-900 hover:bg-pink-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#WebDevelopment</span>
    <span class="bg-blue-300 text-gray-900 hover:bg-blue-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#ReactJS</span>
    <span class="bg-green-300 text-gray-900 hover:bg-green-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#TailwindCSS</span>
    <span class="bg-yellow-300 text-gray-900 hover:bg-yellow-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#JavaScript</span>
    <span class="bg-purple-300 text-gray-900 hover:bg-purple-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#CSS</span>
    <span class="bg-red-300 text-gray-900 hover:bg-red-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#Frontend</span>
  </div>
  <div class="mt-6">
    <h3 class="text-xl font-semibold mb-2">Popular Users</h3>
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <span class="ml-3 text-lg">Jane Doe</span>
    </div>
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <span class="ml-3 text-lg">John Smith</span>
    </div>
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
      <span class="ml-3 text-lg">Alice Johnson</span>
    </div>
  </div>
  <div class="mt-4">
    <h3 class="text-xl font-semibold mb-2">Featured Posts</h3>
    <img class="w-full rounded-lg mb-2" src="https://picsum.photos/500/300" alt="Featured Post">
    <img class="w-full rounded-lg mb-2" src="https://picsum.photos/500/301" alt="Featured Post">
    <img class="w-full rounded-lg mb-2" src="https://picsum.photos/500/302" alt="Featured Post">
  </div>
</div>

태그, 구름, 구성 요소, Glassmorphism, 단색, 복합체, 전자 상거래,

전자 상거래를 위한 Glassmorphism 태그 클라우드 구성 요소

열다 미리 보기

                <div class="flex flex-wrap justify-center p-8 bg-gray-200 dark:bg-gray-900 min-h-screen items-center">
  <div class="bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-xl max-w-2xl w-full">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Popular Tags</h2>
    <div class="flex flex-wrap gap-3 justify-center">
      <span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity-50 transition duration-300 ease-in-out">Electronics</span>
      <span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity-50 transition duration-300 ease-in-out">Apparel</span>
      <span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity 50 transition duration-300 ease-in-out">Home Goods</span>
      <span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity-50 transition duration-300 ease-in-out">Books</span>
      <span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity-50 transition duration-300 ease-in-out">Sports</span>
      <span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity-50 transition duration-300 ease-in-out">Beauty</span>
      <span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity-50 transition duration-300 ease-in-out">Outdoors</span>
      <span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity-50 transition duration-300 ease-in-out">Gaming</span>
    </div>
  </div>
</div>

태그 클라우드 구성 요소

회색조 색상과 마이크로 인터랙션이 있는 반응형 Tag Cloud 구성 요소로, 어두운 테마를 지원하는 소셜 미디어 인터페이스를 위해 설계되었습니다.

열다 미리 보기

                <div class="container mx-auto px-4 py-8 dark:bg-gray-900">
  <div class="text-center mb-8">
    <h2 class="text-3xl font-bold text-gray-800 dark:text-white">Popular Tags</h2>
  </div>
  <div class="flex flex-wrap justify-center gap-4">
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#webdevelopment</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#tailwindcss</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#javascript</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#css3</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#html5</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#react</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#vuejs</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#angular</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#nodejs</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#python</span>
  </div>
</div>

태그 클라우드 구성 요소

데이터 시각화 대시보드를 위한 생생한 색상이 있는 3D Tag Cloud 구성 요소.

열다 미리 보기

                <div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
  <span class="bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-blue-700 transform transition duration-300 hover:scale-110 hover:rotate-3" style="perspective: 1000px; transform: rotateY(15deg) rotateX(5deg);">Marketing Analysis</span>
  <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-red-700 transform transition duration-300 hover:scale-110 hover:-rotate-6" style="perspective: 1000px; transform: rotateY(-10deg) rotateX(-3deg);">Sales Performance</span>
  <span class="bg-green-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-green-700 transform transition duration-300 hover:scale-110 hover:rotate-4" style="perspective: 1000px; transform: rotateY(5deg) rotateX(10deg);">Customer Feedback</span>
  <span class="bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-yellow-700 transform transition duration-300 hover:scale-110 hover:-rotate-4" style="perspective: 1000px; transform: rotateY(-5deg) rotateX(8deg);">Product Development</span>
  <span class="bg-purple-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-purple-700 transform transition duration-300 hover:scale-110 hover:rotate-2" style="perspective: 1000px; transform: rotateY(10deg) rotateX(-6deg);">Financial Reporting</span>
  <span class="bg-pink-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-pink-700 transform transition duration-300 hover:scale-110 hover:-rotate-2" style="perspective: 1000px; transform: rotateY(-8deg) rotateX(4deg);">Operational Efficiency</span>
  <span class="bg-indigo-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-indigo-700 transform transition duration-300 hover:scale-110 hover:rotate-5" style="perspective: 1000px; transform: rotateY(12deg) rotateX(-2deg);">Market Trends</span>
</div>

Retro Tag Cloud 구성 요소

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

열다 미리 보기

                <div class="bg-stone-50 dark:bg-stone-900 p-6 rounded-lg shadow-md">
  <h2 class="text-xl font-mono text-stone-700 dark:text-stone-300 mb-4">Skills</h2>
  <div class="flex flex-wrap gap-2">
    <span class="px-3 py-1 bg-rose-200 dark:bg-rose-700 text-rose-800 dark:text-rose-200 text-sm font-mono rounded-full shadow-sm">HTML</span>
    <span class="px-3 py-1 bg-teal-200 dark:bg-teal-700 text-teal-800 dark:text-teal-200 text-sm font-mono rounded-full shadow-sm">CSS</span>
    <span class="px-3 py-1 bg-fuchsia-200 dark:bg-fuchsia-700 text-fuchsia-800 dark:text-fuchsia-200 text-sm font-mono rounded-full shadow-sm">Tailwind CSS</span>
    <span class="px-3 py-1 bg-violet-200 dark:bg-violet-700 text-violet-800 dark:text-violet-200 text-sm font-mono rounded-full shadow-sm">JavaScript</span>
    <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-200 text-sm font-mono rounded-full shadow-sm">Python</span>
    <span class="px-3 py-1 bg-cyan-200 dark:bg-cyan-700 text-cyan-800 dark:text-cyan-200 text-sm font-mono rounded-full shadow-sm">React</span>
    <span class="px-3 py-1 bg-lime-200 dark:bg-lime-700 text-lime-800 dark:text-lime-200 text-sm font-mono rounded-full shadow-sm">Django</span>
  </div>
</div>

태그 클라우드 구성 요소

Glassmorphism 디자인의 Tag Cloud Component로, 반응형 효과와 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="flex flex-wrap justify-center gap-2 p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="glass-tag bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-2 rounded-md shadow-md backdrop-filter backdrop-blur-sm bg-opacity-20 dark:bg-opacity-20 transition-colors duration-300 hover:scale-105 transform cursor-pointer">#Technology</div>
  <div class="glass-tag bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-2 rounded-md shadow-md backdrop-filter backdrop-blur-sm bg-opacity-20 dark:bg-opacity-20 transition-colors duration-300 hover:scale-105 transform cursor-pointer">#WebDevelopment</div>
  <div class="glass-tag bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-2 rounded-md shadow-md backdrop-filter backdrop-blur-sm bg-opacity-20 dark:bg-opacity-20 transition-colors duration-300 hover:scale-105 transform cursor-pointer">#Glassmorphism</div>
  <div class="glass-tag bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-2 rounded-md shadow-md backdrop-filter backdrop-blur-sm bg-opacity-20 dark:bg-opacity-20 transition-colors duration-300 hover:scale-105 transform cursor-pointer">#TailwindCSS</div>
  <div class="glass-tag bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-2 rounded-md shadow-md backdrop-filter backdrop-blur-sm bg-opacity-20 dark:bg-opacity-20 transition-colors duration-300 hover:scale-105 transform cursor-pointer">#Frontend</div>
  <div class="glass-tag bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-2 rounded-md shadow-md backdrop-filter backdrop-blur-sm bg-opacity-20 dark:bg-opacity-20 transition-colors duration-300 hover:scale-105 transform cursor-pointer">#DarkMode</div>
  <div class="glass-tag bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-2 rounded-md shadow-md backdrop-filter backdrop-blur-sm bg-opacity-20 dark:bg-opacity-20 transition-colors duration-300 hover:scale-105 transform cursor-pointer">#ResponsiveDesign</div>
</div>