CCHub Logo CCHub Tailwind Collection
구성 요소 배지 Badges 구성 요소

Badges 구성 요소

마이크로 인터랙션으로 설계된 반응형 Badges 구성 요소로, 보색 구성표와 어두운 테마 지원을 특징으로 합니다. 비즈니스 및 기업 웹 사이트에 이상적인 이 구성 요소에는 사용자 작업에 응답하는 매력적인 애니메이션이 포함되어 있습니다. 앞서 언급한 호버 효과와 같은 시각적 신호는 사용자 경험을 향상시킵니다.

미리 보기

HTML 코드 

<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>

관련 구성 요소

Badges 구성 요소

3D 디자인의 반응형 배지 구성 요소로, 깊이와 어두운 테마를 지원합니다. 각 배지는 Tailwind CSS를 사용하여 디자인된 이름, 이미지 및 설명이 있는 사용자를 나타냅니다.

열다

Badges 구성 요소

배지: 전자 상거래를 위한 반응형 어두운 테마를 지원하는 구성 요소입니다.

열다

Badges 구성 요소

회색조 색 구성표가 있는 복고풍 테마의 배지 구성 요소로, 블로그 또는 콘텐츠 사이트에 적합합니다. 여러 대화형 요소와 완전한 반응성을 특징으로 하며 다크 모드를 지원합니다. 이 디자인은 HTML과 Tailwind CSS에만 의존하여 JavaScript를 피합니다.

열다