Neon_Glow_Grayscale_Sports_Sidebar
스포츠/피트니스 애플리케이션을 위한 복잡하고 반응이 빠른 사이드바 구성 요소로, 그레이스케일 색 구성표 내에서 네온/글로우 효과를 제공합니다. 다크 모드 지원과 프로필, 탐색, 팀 및 설정과 같은 대화형 요소가 포함됩니다.
HTML 코드
<div class="flex h-screen bg-gray-950 text-gray-300 dark:bg-black dark:text-gray-200">
<!-- Sidebar -->
<div class="flex flex-col w-64 md:w-72 bg-gray-900 border-r border-gray-800 shadow-xl dark:bg-[#1a1a1a] dark:border-gray-800 transition-all duration-300">
<div class="flex items-center justify-center h-20 border-b border-gray-800 relative">
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-blue-500/20 to-transparent blur-md opacity-0 dark:opacity-100 transition-opacity duration-500"></div>
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-pink-500/10 to-transparent blur-3xl opacity-0 dark:opacity-100 transition-opacity duration-500 z-0"></div>
<h1 class="text-2xl font-extrabold tracking-wider uppercase text-gray-50 dark:text-gray-50 relative z-10">
<span class="text-blue-400 dark:text-blue-500">FIT</span><span class="text-pink-400 dark:text-pink-500">HUB</span>
</h1>
</div>
<nav class="flex-1 py-6 px-4 space-y-2 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-700 scrollbar-track-gray-900">
<!-- Profile Section -->
<div class="flex items-center p-4 rounded-lg bg-gray-800 hover:bg-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 transition-all duration-200 relative group">
<div class="absolute inset-0 bg-blue-500/10 dark:bg-blue-500/20 opacity-0 group-hover:opacity-100 blur-sm transition-opacity duration-300"></div>
<img class="h-12 w-12 rounded-full border-2 border-blue-400 dark:border-blue-500 object-cover relative z-10" src="https://randomuser.me/api/portraits/women/65.jpg" alt="User Avatar">
<div class="ml-4 relative z-10">
<p class="font-semibold text-gray-50 dark:text-gray-100">Jane Doe</p>
<p class="text-sm text-gray-400 dark:text-gray-400">Athlete Pro</p>
</div>
</div>
<!-- Main Navigation -->
<a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-blue-600/30 hover:text-blue-400 dark:hover:bg-blue-500/20 dark:hover:text-blue-500 group relative overflow-hidden transition-all duration-200">
<div class="absolute inset-0 bg-blue-500/10 dark:bg-blue-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h3v-3m-6 0v3H9m0-6h.01M10 12l-2 2m2-2l2 2m-6 4h4"></path></svg>
<span class="relative z-10">Dashboard</span>
</a>
<a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-pink-600/30 hover:text-pink-400 dark:hover:bg-pink-500/20 dark:hover:text-pink-500 group relative overflow-hidden transition-all duration-200">
<div class="absolute inset-0 bg-pink-500/10 dark:bg-pink-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.79 2-4 2s-4-.895-4-2 1.79-2 4-2 4 .895 4 2zm12-3c0 1.105-1.79 2-4 2s-4-.895-4-2 1.79-2 4-2 4 .895 4 2zM9 10l12-3"></path></svg>
<span class="relative z-10">Workouts</span>
</a>
<a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-blue-600/30 hover:text-blue-400 dark:hover:bg-blue-500/20 dark:hover:text-blue-500 group relative overflow-hidden transition-all duration-200">
<div class="absolute inset-0 bg-blue-500/10 dark:bg-blue-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h-4l-3-3H6.5a2.5 2.5 0 010-5H17l-3-3h4l3 3V20z"></path></svg>
<span class="relative z-10">Team Stats</span>
</a>
<a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-pink-600/30 hover:text-pink-400 dark:hover:bg-pink-500/20 dark:hover:text-pink-500 group relative overflow-hidden transition-all duration-200">
<div class="absolute inset-0 bg-pink-500/10 dark:bg-pink-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
<span class="relative z-10">Schedule</span>
</a>
<a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-blue-600/30 hover:text-blue-400 dark:hover:bg-blue-500/20 dark:hover:text-blue-500 group relative overflow-hidden transition-all duration-200">
<div class="absolute inset-0 bg-blue-500/10 dark:bg-blue-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17L3 11m0 0l6-6m-6 6h12a2 2 0 012 2v6a2 2 0 01-2 2H3a2 2 0 01-2-2v-6a2 2 0 012-2zm0 0l6-6m-6 6h12a2 2 0 012 2v6a2 2 0 01-2 2H3a2 2 0 01-2-2v-6a2 2 0 012-2z"></path></svg>
<span class="relative z-10">Reports</span>
</a>
<!-- Teams Section -->
<div class="pt-4">
<h3 class="text-xs uppercase tracking-wider text-gray-500 font-semibold mb-2">Teams</h3>
<a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
<div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<span class="h-3 w-3 rounded-full bg-red-500 relative z-10 animate-pulse-glow-red"></span>
<span class="ml-3 relative z-10">Phoenix United</span>
</a>
<a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
<div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<span class="h-3 w-3 rounded-full bg-green-500 relative z-10 animate-pulse-glow-green"></span>
<span class="ml-3 relative z-10">Galaxy Runners</span>
</a>
<a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
<div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<span class="h-3 w-3 rounded-full bg-purple-500 relative z-10 animate-pulse-glow-purple"></span>
<span class="ml-3 relative z-10">Zenith Strikers</span>
</a>
</div>
</nav>
<!-- Footer / Settings -->
<div class="px-4 py-6 border-t border-gray-800">
<a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
<div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
<span class="relative z-10">Settings</span>
</a>
<a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
<div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h12"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span class="relative z-10">Logout</span>
</a>
</div>
</div>
<!-- Main Content Area (for demonstration, not part of the sidebar itself) -->
<div class="flex-1 p-8 text-gray-100 dark:text-gray-50 overflow-auto">
<h2 class="text-3xl font-bold mb-6">
<span class="text-blue-400 dark:text-blue-500">Welcome,</span> <span class="text-pink-400 dark:text-pink-500">Athlete!</span>
</h2>
<p class="mb-4">This is a placeholder for your main application content.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="p-6 rounded-lg bg-gray-800 border border-gray-700 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent opacity-0 group-hover:opacity-100 blur-sm transition-opacity duration-300"></div>
<h3 class="text-xl font-semibold mb-2 relative z-10">Daily Activity</h3>
<p class="text-gray-400 relative z-10">Track your steps, calories, and active minutes.</p>
<img src="https://picsum.photos/300/200?random=1" alt="Daily Activity" class="mt-4 rounded-md object-cover w-full h-32 relative z-10 opacity-70 group-hover:opacity-90 transition-opacity duration-300">
</div>
<div class="p-6 rounded-lg bg-gray-800 border border-gray-700 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-pink-500/10 to-transparent opacity-0 group-hover:opacity-100 blur-sm transition-opacity duration-300"></div>
<h3 class="text-xl font-semibold mb-2 relative z-10">Upcoming Events</h3>
<p class="text-gray-400 relative z-10">Don't miss a game or practice session.</p>
<img src="https://picsum.photos/300/200?random=2" alt="Upcoming Events" class="mt-4 rounded-md object-cover w-full h-32 relative z-10 opacity-70 group-hover:opacity-90 transition-opacity duration-300">
</div>
<div class="p-6 rounded-lg bg-gray-800 border border-gray-700 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent opacity-0 group-hover:opacity-100 blur-sm transition-opacity duration-300"></div>
<h3 class="text-xl font-semibold mb-2 relative z-10">Performance Insights</h3>
<p class="text-gray-400 relative z-10">Visualize your progress over time.</p>
<img src="https://picsum.photos/300/200?random=3" alt="Performance Insights" class="mt-4 rounded-md object-cover w-full h-32 relative z-10 opacity-70 group-hover:opacity-90 transition-opacity duration-300">
</div>
</div>
<p class="text-gray-500 mt-8 text-center text-sm">This content area demonstrates dark mode and overall integration.</p>
</div>
<style>
/* Custom scrollbar for Webkit browsers */
.scrollbar-thin::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background-color: #4a5568; /* gray-700 */
border-radius: 4px;
border: 2px solid transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
background-color: #61626c; /* slightly lighter on hover */
}
/* Tailwind Animation Utilities */
@keyframes pulse-glow-red {
0%, 100% {
box-shadow: 0 0 0px #ef4444;
}
50% {
box-shadow: 0 0 8px #ef4444, 0 0 16px #ef4444;
}
}
.animate-pulse-glow-red {
animation: pulse-glow-red 2s infinite ease-in-out;
}
@keyframes pulse-glow-green {
0%, 100% {
box-shadow: 0 0 0px #22c55e;
}
50% {
box-shadow: 0 0 8px #22c55e, 0 0 16px #22c55e;
}
}
.animate-pulse-glow-green {
animation: pulse-glow-green 2s infinite ease-in-out;
}
@keyframes pulse-glow-purple {
0%, 100% {
box-shadow: 0 0 0px #a855f7;
}
50% {
box-shadow: 0 0 8px #a855f7, 0 0 16px #a855f7;
}
}
.animate-pulse-glow-purple {
animation: pulse-glow-purple 2s infinite ease-in-out;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.w-64 {
width: 56px; /* Collapsed width on mobile */
}
.md\:w-72 {
width: 56px; /* Override for mobile, effectively */
}
.flex-col .text-2xl, .flex-col .text-base, .flex-col .text-sm, .flex-col .text-lg, .flex-col .ml-4, .flex-col .mr-3, .flex-col .px-4, .flex-col .py-3, .flex-col .h-12, .flex-col .w-12, .flex-col .h-5, .flex-col .w-5, .flex-col .px-4, .flex-col .py-6 {
display: none; /* Hide text/padding elements when collapsed */
}
.flex-col .h-20 {
height: 60px;
}
.flex-col .items-center.justify-center {
justify-content: center;
}
.flex-col .h-20 .text-2xl {
display: initial; /* Show title on mobile */
font-size: 1.5rem; /* Smaller title on mobile */
line-height: 1.75rem;
}
.flex-col .h-20 .text-2xl span {
display: none;
}
.flex-col .h-20 h1:before {
content: 'F'; /* Show only 'F' for the logo on mobile */
display: block;
color: #60a5fa;
}
.flex-col .h-20 h1.dark\:text-gray-50:before {
color: #60a5fa;
}
.flex-col .flex-col {
width: 56px; /* Ensure collapsed width */
}
.flex-col .rounded-full {
margin: auto; /* Center avatar */
}
.flex-col svg {
margin-right: 0; /* Remove margin for icons */
}
.flex-col .px-4.py-3 {
padding-left:0.9rem; /* Adjust padding for icons only */
padding-right:0.9rem;
justify-content: center;
}
.flex-col .px-4.py-3 span {
display:none; /* Hide icon text */
}
.flex-col .rounded-lg.bg-gray-800, .flex-col .pt-4 {
margin-top: 0; /* Adjust spacing */
margin-bottom: 0;
}
.flex-col .pt-4 .text-xs {
display: none; /* Hide team section title on mobile */
}
.flex-col .h-3.w-3 {
margin: auto; /* Center team status indicator */
}
.flex-col .px-4.py-6 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
}
</style>
</div>관련 구성 요소
사이드바 구성 요소
전자 상거래를 위한 반응형이고 미니멀한 사이드바 구성 요소이며 다크 모드를 지원합니다. 제품 카테고리와 장바구니 아이콘이 있는 간단한 레이아웃이 특징입니다.
사이드바 구성 요소
Tailwind CSS를 사용하여 Neumorphism 스타일로 설계된 반응형 사이드바 구성 요소입니다. 미묘한 그림자가 있는 부드러운 UI 모양이 특징이며 어두운 모드를 지원하며 자리 표시자 이미지와 아바타가 포함되어 있습니다.
Gradient Agriculture 사이드바
단색 그라디언트 디자인의 간단하고 반응이 빠른 사이드바 구성 요소로 농업 및 농업 웹사이트에 적합합니다. 다크 모드 지원이 포함됩니다.