CCHub Logo CCHub Tailwind Collection
Komponenten Kennzeichen Badges-Komponente

Badges-Komponente

Eine einfache und reaktionsschnelle Badges-Komponente, die mit einer 3D-Ästhetik und einem komplementären Farbschema für den Konsum von Blogs und Inhalten entwickelt wurde. Unterstützt den Dunkelmodus.

Vorschau

HTML-Code 

<div class="flex flex-wrap p-5 justify-center">
    <div class="m-2 transition-transform transform hover:scale-105 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-lg p-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span class="font-semibold">Badge 1</span>
        </div>
        <p class="text-sm mt-2">This is a description for badge 1.</p>
    </div>
    <div class="m-2 transition-transform transform hover:scale-105 bg-red-500 dark:bg-red-700 text-white rounded-lg shadow-lg p-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span class="font-semibold">Badge 2</span>
        </div>
        <p class="text-sm mt-2">This is a description for badge 2.</p>
    </div>
    <div class="m-2 transition-transform transform hover:scale-105 bg-green-500 dark:bg-green-700 text-white rounded-lg shadow-lg p-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span class="font-semibold">Badge 3</span>
        </div>
        <p class="text-sm mt-2">This is a description for badge 3.</p>
    </div>
</div>

Verwandte Komponenten

OrganicNatureInspiredBadges

Eine Badges-Komponente mittlerer Komplexität mit von der Natur inspirierten fließenden Linien und einem triadischen Farbschema, das sich für ein Portfolio eignet, um Arbeiten oder Produkte zu präsentieren. Es bietet Unterstützung für Reaktionsfähigkeit und Dunkelmodus.

Offen

GradientSepiaAbzeichen

Eine reaktionsschnelle Musik-/Audio-spezifische Badge-Komponente mit sepiafarbenen/braunen Farbverlaufsübergängen, die sich für die Anzeige von Genres, Stimmungen oder Künstlerkategorien eignet. Enthält Unterstützung für den Dunkelmodus.

Offen

Komponente "Finanzabzeichen"

Eine minimalistische und flache Designkomponente für Finanzausweise in Ozean-/Blautönen, die für Finanz- und Bankschnittstellen geeignet ist. Es verfügt über responsives Design und Unterstützung für den Dunkelmodus.

Offen