CCHub Logo CCHub Tailwind Collection
Komponenten Kennzeichen Badges-Komponente

Badges-Komponente

Eine responsive Badges-Komponente mit Material Design-Stil, Unterstützung für dunkles Design und Farbschema in Erdtönen für Blog-Inhalte.

Vorschau

HTML-Code 

<div class="flex flex-wrap justify-center p-6 bg-white dark:bg-gray-800">
    <div class="m-4">
        <div class="bg-green-200 dark:bg-green-600 text-green-800 dark:text-green-200 px-4 py-2 rounded-full shadow-md">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline mr-2">
            <span>Author: John Doe</span>
        </div>
    </div>
    <div class="m-4">
        <div class="bg-brown-200 dark:bg-brown-600 text-brown-800 dark:text-brown-200 px-4 py-2 rounded-full shadow-md">
            <img src="https://picsum.photos/40/40?random=1" alt="Image" class="w-8 h-8 rounded-full inline mr-2">
            <span>Category: Nature</span>
        </div>
    </div>
    <div class="m-4">
        <div class="bg-amber-200 dark:bg-amber-600 text-amber-800 dark:text-amber-200 px-4 py-2 rounded-full shadow-md">
            <img src="https://picsum.photos/40/40?random=2" alt="Image" class="w-8 h-8 rounded-full inline mr-2">
            <span>Tag: Environment</span>
        </div>
    </div>
    <div class="m-4">
        <div class="bg-yellow-200 dark:bg-yellow-600 text-yellow-800 dark:text-yellow-200 px-4 py-2 rounded-full shadow-md">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline mr-2">
            <span>Contributor: Jane Smith</span>
        </div>
    </div>
</div>

Verwandte Komponenten

Glassmorphism_Grayscale_Badges_Component

Eine einfache, reaktionsschnelle Badges-Komponente im Glassmorphism-Stil mit einem Graustufen-Farbschema, geeignet für Geschäfts-/Unternehmenswebsites. Enthält Unterstützung für den Dunkelmodus.

Offen

Badges-Komponente

Eine Komponente für Abzeichen im Retro-Design mit einem Graustufen-Farbschema, die für einen Blog oder eine Content-Site geeignet ist. Es verfügt über mehrere interaktive Elemente und volle Reaktionsfähigkeit mit Unterstützung des Dunkelmodus. Das Design vermeidet JavaScript und verlässt sich ausschließlich auf HTML und Tailwind CSS.

Offen

Badges-Komponente

Eine responsive Badges-Komponente mit Mikrointeraktionen und Unterstützung für dunkle Themen, die mit Tailwind CSS entwickelt wurde. Diese Komponente enthält Hover-Effekte und verwendet Platzhalterbilder für Avatare.

Offen