CCHub Logo CCHub Tailwind Collection
Komponenten Tag Cloud Tag-Cloud-Komponente

Tag-Cloud-Komponente

Dunkler Modus der Tag-Cloud-Komponente

Vorschau

HTML-Code 

<div class="dark:bg-gray-900 dark:text-gray-200 min-h-screen p-8">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-6 text-amber-600 dark:text-amber-400">Popular Product Tags</h2>
    <div class="flex flex-wrap gap-3">
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Electronics</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Home Goods</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Apparel</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Books</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Sports & Outdoors</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Beauty</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Toys</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Automotive</a>
    </div>
  </div>
</div>

Verwandte Komponenten

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

Tag-Cloud-Komponente

Eine Tag-Cloud-Komponente, die im Neumorphism-Stil in Graustufen entwickelt wurde, sich für Blogs und den Konsum von Inhalten eignet und interaktive Elemente enthält.

Offen

Tag-Cloud-Komponente 13

Eine Tag-Cloud-Komponente, die im Neumorphism-Stil entworfen wurde. Es verfügt über einen Soft-UI-Stil mit Elementen, die mit subtilen Schatten aus dem Hintergrund herauszuragen scheinen. Die Komponente unterstützt responsives Design und dunkle Themen.

Offen