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 구성 요소
스큐어모피즘 스타일, 트라이어딕 색 구성표 및 단순한 복잡성을 갖춘 반응형 Badges 구성 요소로, 어두운 테마를 지원하는 포트폴리오를 위해 설계되었습니다.
Badges 구성 요소
Glassmorphism 스타일로 디자인된 반응형 Badges 구성 요소로, 젖빛 유리와 같은 반투명 요소와 흐림 효과를 특징으로 하며 다크 모드를 지원합니다.