Neon_Glow_Sports_Sitemap_Component
Un composant de sitemap simple et réactif avec des effets de néon/lueur et des couleurs à contraste élevé, conçu pour les applications de sport/fitness. Inclut la prise en charge du mode sombre.
HTML Code
<section class="relative py-12 sm:py-16 md:py-20 lg:py-24 bg-gray-950 dark:bg-black overflow-hidden">
<div class="absolute inset-0 z-0 opacity-10">
<div class="absolute top-0 left-0 w-2/3 h-2/3 bg-blue-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse-slow"></div>
<div class="absolute bottom-0 right-0 w-1/2 h-1/2 bg-purple-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse-slow-reverse"></div>
</div>
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10 sm:mb-12 md:mb-16">
<h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white leading-tight animate-fade-in">
<span class="block pb-2 lg:inline-block relative text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-blue-200 to-blue-400 dark:from-blue-600 dark:via-blue-400 dark:to-blue-600">
Explore Our Arena
<span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-full h-1 bg-blue-500 rounded-full shadow-lg shadow-blue-500/50 animate-glow-line"></span>
</span>
</h2>
<p class="mt-4 text-base sm:text-lg text-gray-400 max-w-3xl mx-auto animate-fade-in-delay-1">
Navigate through our powerful features and dedicated sections for athletes and fans.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8 lg:gap-10">
<div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-blue-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-blue-500/20 animate-fade-in-delay-2">
<div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<svg class="w-10 h-10 mb-4 text-blue-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(59,130,246,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" 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 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
<h3 class="text-xl font-semibold text-white mb-2">
<a href="#" class="group-hover:text-blue-200 transition-colors duration-300">Team Stats</a>
</h3>
<p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">In-depth performance analytics.</p>
</div>
</div>
<div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-purple-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-purple-500/20 animate-fade-in-delay-3">
<div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<svg class="w-10 h-10 mb-4 text-purple-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(168,85,247,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" 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="M17 20h-2A4 4 0 0111 16V8a4 4 0 014-4h2a4 4 0 014 4v8a4 4 0 01-4 4z"></path>
</svg>
<h3 class="text-xl font-semibold text-white mb-2">
<a href="#" class="group-hover:text-purple-200 transition-colors duration-300">Player Profiles</a>
</h3>
<p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Detailed athlete information.</p>
</div>
</div>
<div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-pink-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-pink-500/20 animate-fade-in-delay-4">
<div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<svg class="w-10 h-10 mb-4 text-pink-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(236,72,153,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
<h3 class="text-xl font-semibold text-white mb-2">
<a href="#" class="group-hover:text-pink-200 transition-colors duration-300">Upcoming Games</a>
</h3>
<p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Never miss a match.</p>
</div>
</div>
<div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-green-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-green-500/20 animate-fade-in-delay-5">
<div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<svg class="w-10 h-10 mb-4 text-green-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(34,197,94,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" 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 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 18S13.168 18.477 12 19.253"></path>
</svg>
<h3 class="text-xl font-semibold text-white mb-2">
<a href="#" class="group-hover:text-green-200 transition-colors duration-300">Fan Zone</a>
</h3>
<p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Connect with fellow enthusiasts.</p>
</div>
</div>
<div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-indigo-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-indigo-500/20 animate-fade-in-delay-6">
<div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<svg class="w-10 h-10 mb-4 text-indigo-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(99,102,241,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" 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="M3 5a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2V5zm0 8a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2zm0 8a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2z"></path>
</svg>
<h3 class="text-xl font-semibold text-white mb-2">
<a href="#" class="group-hover:text-indigo-200 transition-colors duration-300">Training Logs</a>
</h3>
<p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Track your progress.</p>
</div>
</div>
<div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-red-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-red-500/20 animate-fade-in-delay-7">
<div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<svg class="w-10 h-10 mb-4 text-red-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(239,68,68,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" 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="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
<h3 class="text-xl font-semibold text-white mb-2">
<a href="#" class="group-hover:text-red-200 transition-colors duration-300">Club Store</a>
</h3>
<p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Gear up for glory.</p>
</div>
</div>
<div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-yellow-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-yellow-500/20 animate-fade-in-delay-8">
<div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<svg class="w-10 h-10 mb-4 text-yellow-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(251,191,36,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" 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="M7 8h10M7 12h10m-9 4h4M6 16.5V20a2 2 0 002 2h8a2 2 0 002-2v-3.5M4 7V4a2 2 0 012-2h12a2 2 0 012 2v3M3 10h18"></path>
</svg>
<h3 class="text-xl font-semibold text-white mb-2">
<a href="#" class="group-hover:text-yellow-200 transition-colors duration-300">Contact Us</a>
</h3>
<p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Get in touch with the team.</p>
</div>
</div>
</div>
</div>
<style>
@keyframes pulse-slow {
0% { transform: scale(1); opacity: 0.3; }
50% { transform: scale(1.05); opacity: 0.4; }
100% { transform: scale(1); opacity: 0.3; }
}
@keyframes pulse-slow-reverse {
0% { transform: scale(1); opacity: 0.3; }
50% { transform: scale(0.95); opacity: 0.4; }
100% { transform: scale(1); opacity: 0.3; }
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Delay animations using different keyframes or utility classes */
.animate-fade-in { animation: fade-in 0.8s ease-out forwards; opacity: 0; }
.animate-fade-in-delay-1 { animation: fade-in 0.8s ease-out 0.2s forwards; opacity: 0; }
.animate-fade-in-delay-2 { animation: fade-in 0.8s ease-out 0.4s forwards; opacity: 0; }
.animate-fade-in-delay-3 { animation: fade-in 0.8s ease-out 0.6s forwards; opacity: 0; }
.animate-fade-in-delay-4 { animation: fade-in 0.8s ease-out 0.8s forwards; opacity: 0; }
.animate-fade-in-delay-5 { animation: fade-in 0.8s ease-out 1.0s forwards; opacity: 0; }
.animate-fade-in-delay-6 { animation: fade-in 0.8s ease-out 1.2s forwards; opacity: 0; }
.animate-fade-in-delay-7 { animation: fade-in 0.8s ease-out 1.4s forwards; opacity: 0; }
.animate-fade-in-delay-8 { animation: fade-in 0.8s ease-out 1.6s forwards; opacity: 0; }
@keyframes glow-line {
0% { width: 0; opacity: 0; }
50% { width: 100%; opacity: 1; }
100% { width: 0; opacity: 0; }
}
/* Apply animations */
.animate-pulse-slow { animation: pulse-slow 6s infinite ease-in-out; }
.animate-pulse-slow-reverse { animation: pulse-slow-reverse 6s infinite ease-in-out; }
.animate-glow-line { animation: glow-line 3s infinite ease-in-out; }
/* Dark mode adjustments for glow */
.dark .group-hover\:opacity-100 {
background: linear-gradient(to br, var(--tw-gradient-stops));
}
.dark .group-hover\:shadow-blue-500\/20 {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.4) !important;
}
.dark .group-hover\:shadow-purple-500\/20 {
box-shadow: 0 0 20px rgba(168, 85, 247, 0.4) !important;
}
.dark .group-hover\:shadow-pink-500\/20 {
box-shadow: 0 0 20px rgba(236, 72, 153, 0.4) !important;
}
.dark .group-hover\:shadow-green-500\/20 {
box-shadow: 0 0 20px rgba(34, 197, 94, 0.4) !important;
}
.dark .group-hover\:shadow-indigo-500\/20 {
box-shadow: 0 0 20px rgba(99, 102, 241, 0.4) !important;
}
.dark .group-hover\:shadow-red-500\/20 {
box-shadow: 0 0 20px rgba(239, 68, 68, 0.4) !important;
}
.dark .group-hover\:shadow-yellow-500\/20 {
box-shadow: 0 0 20px rgba(251, 191, 36, 0.4) !important;
}
</style>
</section>Composants associés
Glassmorphism Composant de plan du site
Un composant de plan de site réactif avec un design de glassmorphism, une palette de couleurs analogue et une prise en charge du mode sombre, adapté aux sites Web d’entreprise et d’entreprise.
Composant de plan du site
Un composant de plan de site simple et dynamique inspiré de la 3D pour les portfolios, avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant de plan du site
Un composant de sitemap de style Material Design pour les interfaces de médias sociaux, avec une prise en charge de la réactivité et du mode sombre à l’aide de Tailwind CSS. Intègre des tons de terre et une complexité moyenne pour les plateformes de réseaux sociaux.