구성 요소 배지 Badges 구성 요소

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를 피합니다.

열다

Badges 구성 요소

소셜 미디어 인터페이스용으로 설계된 반응형 배지 구성 요소로, 매력적인 마이크로 인터랙션과 보색 구성표를 특징으로 하며 다크 모드를 지원합니다.

열다

레트로배지

Retro/Vintage Badges 보색 구성표가 있는 비즈니스/기업 웹사이트를 위한 구성 요소. 심플한 레이아웃, 어두운 테마를 지원하는 반응형 디자인. 자바스크립트가 없습니다.

열다