CCHub Logo CCHub Tailwind Collection
구성 요소 배지 뉴모피즘 배지

뉴모피즘 배지

파스텔 색상 구성표가 있는 뉴모피즘 스타일의 배지 컴포넌트로, 포트폴리오용으로 설계되었으며 Tailwind CSS를 사용합니다.

미리 보기

HTML 코드 

<div class="flex flex-wrap justify-center gap-4 p-4 bg-gray-200 dark:bg-gray-800">
  <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    HTML
  </span>
  <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    CSS
  </span>
  <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    Tailwind CSS
  </span>
  nocode
</div>

<style>
.shadow-neumorphism-light {
  box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
}

.dark .shadow-neumorphism-dark {
  box-shadow: 5px 5px 10px #454545, -5px -5px 10px #3a3a3a;
}
</style>

관련 구성 요소

Badges 구성 요소

Tailwind CSS를 사용하여 설계된 마이크로 인터랙션 및 어두운 테마 지원이 있는 반응형 배지 구성 요소입니다. 이 구성 요소에는 호버 효과가 포함되어 있으며 아바타에 자리 표시자 이미지를 사용합니다.

열다

Badges 구성 요소

유사한 색 구성표와 풍부한 인터페이스를 가진 블로그를 위한 Neumorphism 스타일 배지 구성 요소입니다.

열다

Memphis_Pastel_Food_Badges_Component

음식/레스토랑 웹사이트를 위한 복잡하고 반응이 빠른 배지 구성 요소로, 파스텔 색상 구성표가 있는 Memphis Design에서 영감을 받았습니다. 기하학적 모양, 장난기 넘치는 패턴이 특징이며 다크 모드 지원이 포함되어 있습니다.

열다