Badges 구성 요소
머티리얼 디자인 스타일, 어두운 테마 지원, 블로그 콘텐츠에 대한 흙색 색 구성표가 있는 반응형 배지 구성 요소입니다.
HTML 코드
<div class="flex flex-wrap justify-center p-6 bg-white dark:bg-gray-800">
<div class="m-4">
<div class="bg-green-200 dark:bg-green-600 text-green-800 dark:text-green-200 px-4 py-2 rounded-full shadow-md">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline mr-2">
<span>Author: John Doe</span>
</div>
</div>
<div class="m-4">
<div class="bg-brown-200 dark:bg-brown-600 text-brown-800 dark:text-brown-200 px-4 py-2 rounded-full shadow-md">
<img src="https://picsum.photos/40/40?random=1" alt="Image" class="w-8 h-8 rounded-full inline mr-2">
<span>Category: Nature</span>
</div>
</div>
<div class="m-4">
<div class="bg-amber-200 dark:bg-amber-600 text-amber-800 dark:text-amber-200 px-4 py-2 rounded-full shadow-md">
<img src="https://picsum.photos/40/40?random=2" alt="Image" class="w-8 h-8 rounded-full inline mr-2">
<span>Tag: Environment</span>
</div>
</div>
<div class="m-4">
<div class="bg-yellow-200 dark:bg-yellow-600 text-yellow-800 dark:text-yellow-200 px-4 py-2 rounded-full shadow-md">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline mr-2">
<span>Contributor: Jane Smith</span>
</div>
</div>
</div>