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>관련 구성 요소
Badges 구성 요소
예약/예약 시스템을 위해 설계된 깔끔하고 미니멀한 배지 구성 요소로, 스위스/국제 타이포그래피에서 영감을 받은 반응형 레이아웃, 파스텔 색상 구성표 및 다크 모드 지원을 특징으로 합니다.
배지 구성 요소 - 3D 아날로그 대시보드
3D 디자인, 유사한 색 구성표, 적당한 복잡성 및 대시보드에 대한 어두운 테마 지원을 제공하는 반응형 Badges 구성 요소입니다. Tailwind CSS 클래스만 사용합니다.