Rechercher des composants

Catégories

Composants Nuage de balises

Nuage de balises

Représentation visuelle de balises ou de catégories de contenu

Composant de nuage de balises

Un composant de nuage de balises conçu avec le style Neumorphism en niveaux de gris, adapté aux blogs et à la consommation de contenu, avec des éléments interactifs.

Ouvrir Aperçu

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

Un composant de nuage de balises neumorphiques conçu pour un portfolio, présentant des balises avec un schéma de couleurs monochromatiques, une mise en page réactive et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

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

Composant de nuage de balises Neumorphism

Un composant de nuage de balises réactif avec un design Neumorphism, une palette de couleurs pastel et des interactions complexes, conçu pour le commerce électronique. Inclut la prise en charge du mode sombre et utilise Tailwind CSS.

Ouvrir Aperçu

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

Composant de nuage de balises

Un composant de nuage de balises conçu dans le style Neumorphism, utilisant un schéma de couleurs monochromatiques à des fins de commerce électronique et prenant en charge le thème sombre avec un design réactif.

Ouvrir Aperçu

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

Composant de nuage de balises

Un composant Tag Cloud réactif conçu pour les interfaces de médias sociaux avec une interface utilisateur en mode sombre et une palette de couleurs pastel.

Ouvrir Aperçu

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

Composant de nuage de balises

Un composant de nuage de balises réactif avec des couleurs en niveaux de gris et des micro-interactions, conçu pour les interfaces de médias sociaux avec prise en charge du thème sombre.

Ouvrir Aperçu

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

Composant de nuage de balises

Un composant de nuage de balises 3D avec des couleurs vives pour les tableaux de bord de visualisation de données.

Ouvrir Aperçu

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

Composant de nuage de balises rétro

Un composant de nuage de balises réactif utilisant Tailwind CSS, avec une esthétique de design rétro/vintage, une palette de couleurs pastel et une complexité simple. Convient à un portefeuille, y compris la prise en charge du mode sombre.

Ouvrir Aperçu

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

Composant de nuage de balises

Un composant de nuage de balises avec un design Glassmorphism, avec des effets réactifs et la prise en charge du thème sombre.

Ouvrir Aperçu

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