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>

관련 구성 요소

Healthcare_Badges_Component_Bauhaus

바우하우스(Bauhaus)에서 영감을 받은 디자인의 헬스케어 테마 배지 구성 요소로, 일몰/따뜻한 톤을 사용합니다. 기하학적 형태와 기능적 레이아웃이 특징이며, 의료 응용 프로그램의 상태 또는 범주를 표시하는 데 적합합니다. 다크 모드 지원으로 반응형.

열다

유기농자연영감배지

자연에서 영감을 받은 유동적인 선과 트라이어딕 색 구성표가 있는 중간 정도의 복잡성 배지 구성 요소는 작업이나 제품을 선보이기 위한 포트폴리오에 적합합니다. 여기에는 응답성 및 다크 모드 지원이 포함됩니다.

열다

그라디언트세피아 배지

세피아/갈색 그라디언트 전환이 있는 반응형 음악/오디오 전용 배지 구성 요소로, 장르, 분위기 또는 아티스트 카테고리를 표시하는 데 적합합니다. 다크 모드 지원이 포함됩니다.

열다