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

Tag-Cloud-Komponente

Eine Retro-/Vintage-Tag-Cloud-Komponente mit responsiven Effekten und Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS.

Vorschau

HTML-Code 

<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Tag Cloud</h2>
  <div class="flex flex-wrap gap-2">
    <span class="bg-yellow-500 dark:bg-yellow-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Retro</span>
    <span class="bg-teal-500 dark:bg-teal-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Vintage</span>
    <span class="bg-fuchsia-500 dark:bg-fuchsia-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">80s</span>
    <span class="bg-purple-500 dark:bg-purple-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">90s</span>
    <span class="bg-pink-500 dark:bg-pink-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Nostalgia</span>
    <span class="bg-red-500 dark:bg-red-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Classic</span>
    <span class="bg-blue-500 dark:bg-blue-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Design</span>
    <span class="bg-green-500 dark:bg-green-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Style</span>
  </div>
</div>

Verwandte Komponenten

Tag-Cloud-Komponente

Eine einfache, reaktionsschnelle und lebendige Tag-Cloud-Komponente, die nach Bauhaus-Prinzipien für Geschäfts- und Unternehmenswebsites entwickelt wurde, mit geometrischen Formen und Primärfarben mit hoher Sättigung und Unterstützung des Dunkelmodus.

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

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