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>