CCHub Logo CCHub Tailwind Collection
Komponenten Kennzeichen Badges-Komponente

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.

Vorschau

HTML-Code 

<div class="flex flex-wrap justify-center p-4 bg-white dark:bg-gray-800">
    <div class="m-2 p-4 bg-blue-500 text-white rounded-lg shadow-lg hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <span class="font-semibold">Marketing Team</span>
        </div>
        <p class="text-sm mt-2">Achieved a 20% increase in engagement through targeted campaigns.</p>
    </div>
    <div class="m-2 p-4 bg-green-500 text-white rounded-lg shadow-lg hover:bg-green-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
            <span class="font-semibold">Sales Team</span>
        </div>
        <p class="text-sm mt-2">Closed $500k in new contracts this quarter.</p>
    </div>
    <div class="m-2 p-4 bg-red-500 text-white rounded-lg shadow-lg hover:bg-red-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
            <span class="font-semibold">Product Team</span>
        </div>
        <p class="text-sm mt-2">Launched a new product that increased market share by 15%.</p>
    </div>
    <div class="m-2 p-4 bg-purple-500 text-white rounded-lg shadow-lg hover:bg-purple-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar">
            <span class="font-semibold">Development Team</span>
        </div>
        <p class="text-sm mt-2">Implemented new system improvements for better performance.</p>
    </div>
</div>

Verwandte Komponenten

Badges-Komponente

Eine minimalistische Badges-Komponente für Dashboards mit Erdtönen und Unterstützung für den Dunkelmodus.

Offen

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.

Offen

Neumorphismus-Abzeichen

Hierbei handelt es sich um eine Badges-Komponente im Neumorphism-Stil mit einem Pastell-Farbschema, die für ein Portfolio entwickelt wurde und Tailwind CSS verwendet.

Offen