CCHub Logo CCHub Tailwind Collection
Komponenten Tag Cloud Tag Cloud Komponente Glasmorphismus Monochromatischer Komplex E-Commerce

Tag Cloud Komponente Glasmorphismus Monochromatischer Komplex E-Commerce

Glassmorphism Tag Cloud-Komponente für E-Commerce

Vorschau

HTML-Code 

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

Verwandte Komponenten

Neumorphism-Tag-Cloud-Komponente

Eine reaktionsschnelle Tag-Cloud-Komponente mit Neumorphism-Design, Pastell-Farbschema und komplexen Interaktionen, die auf den E-Commerce zugeschnitten ist. Enthält Unterstützung für den Dunkelmodus und verwendet Tailwind CSS.

Offen

Tag-Cloud-Komponente

Eine Tag-Cloud-Komponente im Glassmorphism-Design mit responsiven Effekten und Unterstützung für dunkle Themen.

Offen

Tag-Cloud-Komponente

Eine reaktionsschnelle Tag-Cloud-Komponente mit Graustufenfarben und Mikrointeraktionen, die für Social-Media-Schnittstellen mit Unterstützung für dunkle Themen entwickelt wurde.

Offen