Badges 구성 요소
비즈니스/기업 웹사이트용으로 설계된 다재다능한 배지 구성 요소로, 다크 모드 UI에서 어스 톤을 활용하여 사용자 경험을 향상시킵니다. 이 구성 요소는 몇 가지 대화형 요소를 사용하여 응답성을 제공합니다.
HTML 코드
<div class="flex flex-wrap justify-center p-6 bg-gray-900 text-gray-300">
<!-- Badge 1 -->
<div class="bg-green-800 dark:bg-green-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
<span>Project Leader</span>
</div>
<!-- Badge 2 -->
<div class="bg-brown-800 dark:bg-brown-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
<span>Senior Developer</span>
</div>
<!-- Badge 3 -->
<div class="bg-yellow-800 dark:bg-yellow-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
<span>UI/UX Designer</span>
</div>
<!-- Badge 4 -->
<div class="bg-gray-800 dark:bg-gray-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
<span>Content Strategist</span>
</div>
</div>