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

Badges 구성 요소

소셜 미디어 인터페이스용으로 설계된 반응형 배지 구성 요소로, 매력적인 마이크로 인터랙션과 보색 구성표를 특징으로 하며 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="flex flex-wrap gap-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">  
  <!-- Badge Example -->  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-blue-500 text-white rounded-md shadow-lg dark:bg-blue-700">    
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">User Name</span>  
  </div>  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-green-500 text-white rounded-md shadow-lg dark:bg-green-700">    
    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">Another User</span>  
  </div>  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-red-500 text-white rounded-md shadow-lg dark:bg-red-700">    
    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">User Three</span>  
  </div>  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-yellow-500 text-white rounded-md shadow-lg dark:bg-yellow-700">    
    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">User Four</span>  
  </div>  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-purple-500 text-white rounded-md shadow-lg dark:bg-purple-700">    
    <img src="https://picsum.photos/200/200?random=1" alt="Random Image" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">Project One</span>  
  </div>  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-teal-500 text-white rounded-md shadow-lg dark:bg-teal-700">    
    <img src="https://picsum.photos/200/200?random=2" alt="Random Image" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">Project Two</span>  
  </div>
</div>

관련 구성 요소

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

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

열다

Badges 구성 요소

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

열다

Badges 구성 요소

블로그/콘텐츠 웹 사이트에 대한 유사한 색 구성표가 있는 Neumorphic Badges 구성 요소. HTML과 Tailwind CSS만 사용하는 반응형 디자인과 어두운 테마 지원이 특징입니다.

열다