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

Badges 구성 요소

어스 톤을 사용하는 3D 스타일로 디자인된 반응형 배지 구성 요소로, 대시보드에 적합한 대화형 요소를 제공합니다.

미리 보기

HTML 코드 

<div class="flex flex-wrap gap-4 p-5">
    <!-- Badge 1 -->
    <div class="bg-gradient-to-br from-green-400 to-green-600 dark:from-green-600 dark:to-green-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/100/80" alt="Badge Image 1" class="rounded-lg mb-2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Active Users</h2>
        <p class="text-gray-600 dark:text-gray-400">1500</p>
    </div>
    
    <!-- Badge 2 -->
    <div class="bg-gradient-to-br from-brown-400 to-brown-500 dark:from-brown-600 dark:to-brown-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/100/80" alt="Badge Image 2" class="rounded-lg mb-2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Signups</h2>
        <p class="text-gray-600 dark:text-gray-400">300</p>
    </div>
    
    <!-- Badge 3 -->
    <div class="bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/100/80" alt="Badge Image 3" class="rounded-lg mb-2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Total Revenue</h2>
        <p class="text-gray-600 dark:text-gray-400">$10,000</p>
    </div>
    
    <!-- Badge 4 -->
    <div class="bg-gradient-to-br from-gray-400 to-gray-500 dark:from-gray-600 dark:to-gray-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/100/80" alt="Badge Image 4" class="rounded-lg mb-2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Feedback Received</h2>
        <p class="text-gray-600 dark:text-gray-400">250</p>
    </div>
</div>

관련 구성 요소

배지 구성 요소 - 3D 아날로그 대시보드

3D 디자인, 유사한 색 구성표, 적당한 복잡성 및 대시보드에 대한 어두운 테마 지원을 제공하는 반응형 Badges 구성 요소입니다. Tailwind CSS 클래스만 사용합니다.

열다

Badges 구성 요소

머티리얼 디자인에서 영감을 받은 기술/SaaS 애플리케이션용 배지 세트로, 강조 색상, 반응형 레이아웃 및 다크 모드 지원이 있는 흑백 색 구성표를 특징으로 합니다.

열다

Healthcare_Badges_Component_Bauhaus

바우하우스(Bauhaus)에서 영감을 받은 디자인의 헬스케어 테마 배지 구성 요소로, 일몰/따뜻한 톤을 사용합니다. 기하학적 형태와 기능적 레이아웃이 특징이며, 의료 응용 프로그램의 상태 또는 범주를 표시하는 데 적합합니다. 다크 모드 지원으로 반응형.

열다