Badges 구성 요소

블로그 콘텐츠 소비를 위해 설계된 뉴모픽 배지 컴포넌트로, 인터랙티브 요소와 다크 모드를 지원하는 반응형 디자인을 제공합니다.

미리 보기

HTML 코드

<div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-neumorphism">  
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Badges</h2>  
  <div class="grid grid-cols-3 gap-4">    
    <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full shadow-neumorphism w-24 h-24">      
      <img src="https://picsum.photos/100/100" alt="Badge 1" class="rounded-full">      
      <p class="text-center text-gray-800 dark:text-white mt-2">Badge 1</p>    
    </div>    
    <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full shadow-neumorphism w-24 h-24">      
      <img src="https://picsum.photos/100/101" alt="Badge 2" class="rounded-full">      
      <p class="text-center text-gray-800 dark:text-white mt-2">Badge 2</p>    
    </div>    
    <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full shadow-neumorphism w-24 h-24">      
      <img src="https://picsum.photos/100/102" alt="Badge 3" class="rounded-full">      
      <p class="text-center text-gray-800 dark:text-white mt-2">Badge 3</p>    
    </div>  
  </div>  
  <div class="grid grid-cols-1 gap-4 mt-8">    
    <div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-neumorphism">      
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-12 h-12">      
      <div class="ml-4">        
        <h3 class="text-lg font-medium text-gray-800 dark:text-white">John Doe</h3>        
        <p class="text-sm text-gray-600 dark:text-gray-300">Contributor</p>      
      </div>      
      <button class="bg-blue-500 text-white rounded-md px-3 py-1 shadow-neumorphism hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Follow</button>    
    </div>    
    <div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-neumorphism">      
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full w-12 h-12">      
      <div class="ml-4">        
        <h3 class="text-lg font-medium text-gray-800 dark:text-white">Jane Smith</h3>        
        <p class="text-sm text-gray-600 dark:text-gray-300">Editor</p>      
      </div>      
      <button class="bg-blue-500 text-white rounded-md px-3 py-1 shadow-neumorphism hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Follow</button>    
    </div>  
  </div>  
</div>

Badges 구성 요소

미리 보기

HTML 코드

관련 구성 요소

Badges 구성 요소

Badges 구성 요소

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