Neon_Glow_Grayscale_Sports_Sidebar
Un componente de barra lateral complejo y sensible para aplicaciones deportivas/fitness, con efectos de neón/brillo dentro de un esquema de color en escala de grises. Incluye compatibilidad con el modo oscuro y elementos interactivos como perfil, navegación, equipos y configuraciones.
Código 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>Componentes relacionados
Componente de barra lateral retro
Un componente de barra lateral receptivo con un diseño retro/vintage para exhibir trabajos o productos, utilizando un esquema de color en escala de grises y clases CSS de Tailwind, que admite el modo oscuro.
Componente de la barra lateral 27
Un componente de barra lateral de estilo retro/vintage con efectos responsivos y compatibilidad con temas oscuros.
Componente de la barra lateral
Un componente de barra lateral responsivo y minimalista para comercio electrónico, con soporte para modo oscuro. Cuenta con un diseño simple con categorías de productos y un ícono de carrito de compras.