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

Badges 구성 요소

Tailwind CSS를 사용하여 설계된 마이크로 인터랙션 및 어두운 테마 지원이 있는 반응형 배지 구성 요소입니다. 이 구성 요소에는 호버 효과가 포함되어 있으며 아바타에 자리 표시자 이미지를 사용합니다.

미리 보기

HTML 코드 

<div class="flex flex-wrap gap-4 p-6 bg-white dark:bg-gray-800">
    <div class="transition-transform transform hover:scale-110 bg-blue-500 dark:bg-blue-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge One
    </div>
    <div class="transition-transform transform hover:scale-110 bg-green-500 dark:bg-green-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Two
    </div>
    <div class="transition-transform transform hover:scale-110 bg-yellow-500 dark:bg-yellow-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Three
    </div>
    <div class="transition-transform transform hover:scale-110 bg-red-500 dark:bg-red-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Four
    </div>
    <div class="transition-transform transform hover:scale-110 bg-purple-500 dark:bg-purple-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Five
    </div>
</div>

관련 구성 요소

Badges 구성 요소

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

열다

Badges 구성 요소

대시보드용 미니멀리스트 배지 구성 요소로, 어스 톤과 다크 모드 지원을 제공합니다.

열다

Badges 구성 요소

소셜 미디어를 위한 간단한 Glassmorphism 스타일의 배지 구성 요소로, 흐림 효과, 유사한 색상 및 Tailwind CSS를 사용한 어두운 모드 지원이 있는 젖빛 유리 효과를 특징으로 합니다. 반응형이며 필요한 경우 이미지에 picsum.photos를 사용하고 아바타에 randomuser.me 사용합니다. JavaScript는 포함되어 있지 않습니다.

열다