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

Badges-Komponente

Eine reaktionsschnelle Badges-Komponente, die mit Mikrointeraktionen entwickelt wurde, mit einem komplementären Farbschema und Unterstützung für dunkle Themen. Diese Komponente ist ideal für Geschäfts- und Unternehmenswebsites und enthält ansprechende Animationen, die auf Benutzeraktionen reagieren. Zuvor erwähnte visuelle Hinweise wie Hover-Effekte verbessern die Benutzererfahrung.

Offen

Badges-Komponente

Eine einfache Badge-Komponente im Glassmorphism-Stil für soziale Medien mit Milchglaseffekten mit Unschärfe, analogen Farben und Unterstützung für den Dunkelmodus mit Tailwind CSS. Es ist reaktionsschnell und verwendet picsum.photos für Bilder und randomuser.me für Avatare, wo nötig. Es ist kein JavaScript enthalten.

Offen

Badges-Komponente

Eine Abzeichenkomponente im Neumorphism-Stil für Blogs mit analogem Farbschema und reichhaltiger Benutzeroberfläche.

Offen