Neon_Glow_Grayscale_Sports_Sidebar
Un composant de barre latérale complexe et réactif pour les applications de sport/fitness, avec des effets de néon/lueur dans une palette de couleurs en niveaux de gris. Inclut la prise en charge du mode sombre et des éléments interactifs tels que le profil, la navigation, les équipes et les paramètres.
HTML Code
<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>Composants associés
Barre latérale pastel skeuomorphe
Un composant de barre latérale simple et réactif avec un design Skeuomorphic et des couleurs pastel, adapté à un blog ou à un site de contenu. Inclut la prise en charge du mode sombre.
Composant de la barre latérale 27
Un composant de barre latérale de style rétro/vintage avec des effets réactifs et une prise en charge du thème sombre.
Composant de la barre latérale
Un composant de barre latérale réactif utilisant Tailwind CSS, avec les principes de conception matérielle et la prise en charge du thème sombre. Comprend un en-tête avec un logo et un titre, ainsi qu’un menu de navigation avec des liens.