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

Tag-Cloud-Komponente

Eine reaktionsschnelle Tag-Cloud-Komponente, die für die Benutzeroberfläche im Dunkelmodus entwickelt wurde und ein Portfolio mit einem analogen Farbschema präsentiert.

Offen

Bauhaus Tag Cloud-Komponente

Eine komplexe, reaktionsschnelle Tag-Cloud-Komponente mit einem vom Bauhaus inspirierten Design in kühlen Neutraltönen, die sich für Bildungsplattformen mit Unterstützung des Dunkelmodus eignet.

Offen

Aquarell-/Kunst-Tag-Cloud-Komponente

Eine komplexe, reaktionsschnelle Tag-Cloud-Komponente mit einem Aquarell-/künstlerischen Designstil und einem pastellfarbenen Farbschema, geeignet für Foren-/Community-Plattformen. Unterstützt den Dunkelmodus.

Offen