CCHub Logo CCHub Tailwind Collection
Komponenten Kennzeichen Badges-Komponente

Badges-Komponente

Eine vielseitige Badges-Komponente, die für Geschäfts-/Unternehmenswebsites entwickelt wurde und Erdtöne in einer Benutzeroberfläche im Dunkelmodus verwendet, um die Benutzererfahrung zu verbessern. Die Komponente bietet Reaktionsfähigkeit mit einigen interaktiven Elementen.

Vorschau

HTML-Code 

<div class="flex flex-wrap justify-center p-6 bg-gray-900 text-gray-300">
    <!-- Badge 1 -->
    <div class="bg-green-800 dark:bg-green-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>Project Leader</span>
    </div>
    <!-- Badge 2 -->
    <div class="bg-brown-800 dark:bg-brown-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>Senior Developer</span>
    </div>
    <!-- Badge 3 -->
    <div class="bg-yellow-800 dark:bg-yellow-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>UI/UX Designer</span>
    </div>
    <!-- Badge 4 -->
    <div class="bg-gray-800 dark:bg-gray-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>Content Strategist</span>
    </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

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

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.

Offen