CCHub Logo CCHub Tailwind Collection
Komponenten Kennzeichen Badges-Komponente

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.

Vorschau

HTML-Code 

<div class="flex flex-wrap gap-4 p-6 bg-white dark:bg-gray-800">
    <div class="transition-transform transform hover:scale-110 bg-blue-500 dark:bg-blue-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge One
    </div>
    <div class="transition-transform transform hover:scale-110 bg-green-500 dark:bg-green-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Two
    </div>
    <div class="transition-transform transform hover:scale-110 bg-yellow-500 dark:bg-yellow-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Three
    </div>
    <div class="transition-transform transform hover:scale-110 bg-red-500 dark:bg-red-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Four
    </div>
    <div class="transition-transform transform hover:scale-110 bg-purple-500 dark:bg-purple-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Five
    </div>
</div>

Verwandte Komponenten

Badges-Komponente

Eine neumorphe Badges-Komponente, die für den Konsum von Blog-Inhalten mit interaktiven Elementen und responsivem Design entwickelt wurde, die den Dunkelmodus unterstützen.

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