Neon_Glow_Pagination_Sports_Fitness
Un composant de pagination simple et réactif avec un effet néon/lueur, une palette de couleurs triadique, conçu pour les applications de sport et de fitness, avec prise en charge du mode sombre.
HTML Code
<nav class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 font-sans">
<ul class="flex list-none p-0 m-0 rounded-lg shadow-lg dark:shadow-xl">
<li>
<a href="#" class="relative block px-4 py-2 text-fuchsia-500 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:text-fuchsia-400 dark:hover:bg-gray-600 rounded-l-lg transition-all duration-300 overflow-hidden group">
<span class="relative z-10">« Previous</span>
<span class="absolute inset-0 bg-fuchsia-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm"></span>
<span class="absolute inset-0 border-2 border-fuchsia-500 rounded-l-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 scale-105 group-hover:scale-100"></span>
</a>
</li>
<li>
<a href="#" class="relative block px-4 py-2 text-emerald-500 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:text-emerald-400 dark:hover:bg-gray-600 transition-all duration-300 overflow-hidden group">
<span class="relative z-10">1</span>
<span class="absolute inset-0 bg-emerald-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm"></span>
<span class="absolute inset-0 border-2 border-emerald-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 scale-105 group-hover:scale-100"></span>
</a>
</li>
<li>
<a href="#" aria-current="page" class="relative block px-4 py-2 text-cyan-500 bg-gray-300 dark:bg-gray-600 font-bold glow-effect-active transition-all duration-300 overflow-hidden group">
<span class="relative z-10">2</span>
<span class="absolute inset-0 bg-cyan-700 opacity-20 transition-opacity duration-300 blur-sm"></span>
<span class="absolute inset-0 border-2 border-cyan-500 scale-105-outline-sm"></span>
</a>
</li>
<li>
<a href="#" class="relative block px-4 py-2 text-emerald-500 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:text-emerald-400 dark:hover:bg-gray-600 transition-all duration-300 overflow-hidden group">
<span class="relative z-10">3</span>
<span class="absolute inset-0 bg-emerald-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm"></span>
<span class="absolute inset-0 border-2 border-emerald-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 scale-105 group-hover:scale-100"></span>
</a>
</li>
<li class="sm:block hidden">
<a href="#" class="relative block px-4 py-2 text-emerald-500 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:text-emerald-400 dark:hover:bg-gray-600 transition-all duration-300 overflow-hidden group">
<span class="relative z-10">4</span>
<span class="absolute inset-0 bg-emerald-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm"></span>
<span class="absolute inset-0 border-2 border-emerald-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 scale-105 group-hover:scale-100"></span>
</a>
</li>
<li>
<a href="#" class="relative block px-4 py-2 text-fuchsia-500 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:text-fuchsia-400 dark:hover:bg-gray-600 rounded-r-lg transition-all duration-300 overflow-hidden group">
<span class="relative z-10">Next »</span>
<span class="absolute inset-0 bg-fuchsia-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm"></span>
<span class="absolute inset-0 border-2 border-fuchsia-500 rounded-r-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 scale-105 group-hover:scale-100"></span>
</a>
</li>
</ul>
</nav>
<style>
/* Custom CSS for the glowing active state and outline effect */
.glow-effect-active {
box-shadow: 0 0 8px rgba(6, 182, 212, 0.7), 0 0 16px rgba(6, 182, 212, 0.5), 0 0 24px rgba(6, 182, 212, 0.3);
transform: scale(1.05);
position: relative;
z-index: 20;
}
.dark .glow-effect-active {
box-shadow: 0 0 8px rgba(34, 211, 238, 0.7), 0 0 16px rgba(34, 211, 238, 0.5), 0 0 24px rgba(34, 211, 238, 0.3);
}
/* Outline effect for hover */
.group:hover .scale-105, .group:hover .scale-105-outline-sm {
transform: scale(1.05);
}
.scale-105-outline-sm {
position: absolute;
inset: 0;
border: 2px solid theme('colors.cyan.500'); /* Use Tailwind config for consistency */
border-radius: inherit; /* Inherit border-radius from parent if applies */
opacity: 1;
filter: drop-shadow(0 0 4px theme('colors.cyan.500'));
transition: transform 0.3s ease, border-color 0.3s ease, filter 0.3s ease;
}
.dark .scale-105-outline-sm {
border-color: theme('colors.cyan.400');
filter: drop-shadow(0 0 4px theme('colors.cyan.400'));
}
/* Small adjustment for responsiveness on smaller screens */
@media (max-width: 640px) {
.glow-effect-active {
transform: scale(1.03);
}
.group:hover .scale-105, .group:hover .scale-105-outline-sm {
transform: scale(1.03);
}
}
</style>Composants associés
Composant de pagination
Composant de pagination réactif avec prise en charge de la 3D, de la couleur triadique, du style simple, du style professionnel/d’entreprise et du mode sombre
Composant de pagination neumorphe
Un composant de pagination neumorphique avec prise en charge du mode sombre.
Brutalist_Retro_Pagination
Un composant de pagination simple, de style brutaliste avec une palette de couleurs rétro, adapté aux sites d’information et de journalisme. Dispose d’un contraste élevé, d’une typographie audacieuse et d’une prise en charge du mode sombre.