Neumorphic Badges 컴포넌트
기술/SaaS 애플리케이션에 적합한 부드러운 뉴모픽 스타일로 디자인된 대화형 배지 모음입니다. 멋진 무채색, 다크 모드 지원 및 반응성이 특징입니다.
HTML 코드
<div class="p-8 bg-gray-100 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans transition-colors duration-300">
<div class="flex flex-wrap gap-6 p-8 bg-gray-100 dark:bg-gray-800 rounded-3xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-4xl">
<!-- Active Badge -->
<button class="flex items-center gap-2 px-5 py-2 rounded-full
bg-gray-100 dark:bg-gray-800
text-blue-600 dark:text-blue-400
shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<span class="w-2.5 h-2.5 bg-blue-600 dark:bg-blue-400 rounded-full animate-pulse"></span>
<span class="text-sm font-semibold whitespace-nowrap">Active</span>
</button>
<!-- Pending Badge -->
<button class="flex items-center gap-2 px-5 py-2 rounded-full
bg-gray-100 dark:bg-gray-800
text-yellow-600 dark:text-yellow-400
shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="text-sm font-semibold whitespace-nowrap">Pending Review</span>
</button>
<!-- Success Badge -->
<button class="flex items-center gap-2 px-5 py-2 rounded-full
bg-gray-100 dark:bg-gray-800
text-green-600 dark:text-green-400
shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="text-sm font-semibold whitespace-nowrap">Completed</span>
</button>
<!-- Error Badge -->
<button class="flex items-center gap-2 px-5 py-2 rounded-full
bg-gray-100 dark:bg-gray-800
text-red-600 dark:text-red-400
shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="text-sm font-semibold whitespace-nowrap">Failed</span>
</button>
<!-- Info Badge -->
<button class="flex items-center gap-2 px-5 py-2 rounded-full
bg-gray-100 dark:bg-gray-800
text-gray-700 dark:text-gray-300
shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="text-sm font-semibold whitespace-nowrap">Informational</span>
</button>
<!-- New Feature Badge with avatar -->
<button class="flex items-center gap-2 px-5 py-2 rounded-full
bg-gray-100 dark:bg-gray-800
text-purple-600 dark:text-purple-400
shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-6 h-6 rounded-full object-cover shadow-md">
<span class="text-sm font-semibold whitespace-nowrap">New Update</span>
<span class="px-2 py-0.5 rounded-full text-xs font-bold bg-purple-200 text-purple-800
dark:bg-purple-800 dark:text-purple-200
shadow-inner">PRO</span>
</button>
<!-- Tag with image/icon -->
<button class="flex items-center gap-2 px-5 py-2 pr-3 rounded-full
bg-gray-100 dark:bg-gray-800
text-indigo-600 dark:text-indigo-400
shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">
<img src="https://picsum.photos/id/237/20/20" alt="Tag Icon" class="w-5 h-5 rounded-full object-cover shadow-sm">
<span class="text-sm font-semibold whitespace-nowrap">Website</span>
</button>
</div>
</div>
<style>
/* Base styles for neumorphism shadows */
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #6d6d6d, -6px -6px 12px #939393;
}
/* Inset styles for pushed/active state */
.shadow-neumorphic-inset-light {
box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 5px 5px 10px #6d6d6d, inset -5px -5px 10px #939393;
}
/* Add a subtle animation for the active dot */
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.animate-pulse {
animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Ensure all transitions are smooth */
.transition-colors {
transition-property: background-color, color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
</style>관련 구성 요소
E-commerce Product Badges 구성 요소
복잡한 전자 상거래 제품 배지 구성 요소는 숲/녹색 팔레트의 색상 그라데이션을 많이 사용하고, 부드러운 전환, 다크 모드를 지원하는 반응형 디자인을 특징으로 합니다. 제품 상태, 제안 또는 카테고리를 표시하는 데 적합합니다.
Badges 구성 요소
소셜 미디어를 위한 간단한 Glassmorphism 스타일의 배지 구성 요소로, 흐림 효과, 유사한 색상 및 Tailwind CSS를 사용한 어두운 모드 지원이 있는 젖빛 유리 효과를 특징으로 합니다. 반응형이며 필요한 경우 이미지에 picsum.photos를 사용하고 아바타에 randomuser.me 사용합니다. JavaScript는 포함되어 있지 않습니다.
Badges 구성 요소
Tailwind CSS를 사용하여 설계된 마이크로 인터랙션 및 어두운 테마 지원이 있는 반응형 배지 구성 요소입니다. 이 구성 요소에는 호버 효과가 포함되어 있으며 아바타에 자리 표시자 이미지를 사용합니다.