Badges 구성 요소
Glassmorphism 스타일로 디자인된 반응형 Badges 구성 요소로, 젖빛 유리와 같은 반투명 요소와 흐림 효과를 특징으로 하며 다크 모드를 지원합니다.
HTML 코드
<div class="flex flex-wrap justify-center space-x-4 mt-10">
<!-- Badge 1 -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mb-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">John Doe</h3>
<p class="text-gray-500 dark:text-gray-400">Web Developer</p>
</div>
<!-- Badge 2 -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/50/51" alt="Avatar" class="rounded-full mb-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Jane Smith</h3>
<p class="text-gray-500 dark:text-gray-400">Graphic Designer</p>
</div>
<!-- Badge 3 -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/50/52" alt="Avatar" class="rounded-full mb-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Mike Lee</h3>
<p class="text-gray-500 dark:text-gray-400">UX Designer</p>
</div>
<!-- Badge 4 -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/50/53" alt="Avatar" class="rounded-full mb-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Emily Clark</h3>
<p class="text-gray-500 dark:text-gray-400">Product Manager</p>
</div>
</div>관련 구성 요소
Badges 구성 요소
블로그/콘텐츠 웹 사이트에 대한 유사한 색 구성표가 있는 Neumorphic Badges 구성 요소. HTML과 Tailwind CSS만 사용하는 반응형 디자인과 어두운 테마 지원이 특징입니다.
Badges 구성 요소
마이크로 인터랙션으로 설계된 반응형 Badges 구성 요소로, 보색 구성표와 어두운 테마 지원을 특징으로 합니다. 비즈니스 및 기업 웹 사이트에 이상적인 이 구성 요소에는 사용자 작업에 응답하는 매력적인 애니메이션이 포함되어 있습니다. 앞서 언급한 호버 효과와 같은 시각적 신호는 사용자 경험을 향상시킵니다.