Badges 구성 요소
소셜 미디어를 위한 간단한 Glassmorphism 스타일의 배지 구성 요소로, 흐림 효과, 유사한 색상 및 Tailwind CSS를 사용한 어두운 모드 지원이 있는 젖빛 유리 효과를 특징으로 합니다. 반응형이며 필요한 경우 이미지에 picsum.photos를 사용하고 아바타에 randomuser.me 사용합니다. JavaScript는 포함되어 있지 않습니다.
HTML 코드
<div class="flex flex-wrap gap-2 p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-indigo-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-indigo-700 dark:text-gray-200">
#SocialLife
</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-purple-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-purple-700 dark:text-gray-200">
#Connections
</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-blue-700 dark:text-gray-200">
#Community
</span>
</div>
관련 구성 요소
Badges 구성 요소
회색조 색 구성표가 있는 복고풍 테마의 배지 구성 요소로, 블로그 또는 콘텐츠 사이트에 적합합니다. 여러 대화형 요소와 완전한 반응성을 특징으로 하며 다크 모드를 지원합니다. 이 디자인은 HTML과 Tailwind CSS에만 의존하여 JavaScript를 피합니다.
레트로배지
Retro/Vintage Badges 보색 구성표가 있는 비즈니스/기업 웹사이트를 위한 구성 요소. 심플한 레이아웃, 어두운 테마를 지원하는 반응형 디자인. 자바스크립트가 없습니다.