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>

관련 구성 요소

Microinteractions Badges 구성 요소

파스텔 색상의 복잡하고 반응이 빠른 배지 구성 요소로, 컨설팅/서비스를 위해 설계되었으며, 호버 마이크로 인터랙션 및 다크 모드 지원을 제공합니다. 각 배지는 호버링 시 약간 확장되어 더 많은 컨텍스트를 표시합니다.

열다

Neumorphic Badges 컴포넌트

기술/SaaS 애플리케이션에 적합한 부드러운 뉴모픽 스타일로 디자인된 대화형 배지 모음입니다. 멋진 무채색, 다크 모드 지원 및 반응성이 특징입니다.

열다

Badges 구성 요소

스큐어모피즘 스타일, 트라이어딕 색 구성표 및 단순한 복잡성을 갖춘 반응형 Badges 구성 요소로, 어두운 테마를 지원하는 포트폴리오를 위해 설계되었습니다.

열다