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

Tag-Cloud-Komponente

Eine Tag-Cloud-Komponente, die im Neumorphism-Stil entworfen wurde, ein monochromatisches Farbschema für E-Commerce-Zwecke verwendet und dunkles Design mit responsivem Design unterstützt.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Tag-Cloud-Komponente

Eine komplexe, reaktionsschnelle Tag Cloud-Komponente mit Mikrointeraktionen, die für ein Dashboard entwickelt wurde und ein Graustufen-Farbschema verwendet. Unterstützt den Dunkelmodus.

Offen

Tag-Cloud-Komponente

Eine responsive Tag-Cloud-Komponente mit Material Design-Stilen, einem komplementären Farbschema und moderater Komplexität für E-Commerce-Zwecke mit Unterstützung für dunkle Themen.

Offen

Tag-Cloud-Komponente

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

Offen