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
Un composant de pagination réactif, monochrome inspiré de la 3D pour les interfaces de médias sociaux, avec prise en charge du mode sombre, conçu avec Tailwind CSS.
Composant de pagination Glassmorphism
Un composant de pagination réactif conçu avec un glassmorphisme et une palette de couleurs triadique, adapté à la lecture de blogs et de contenus. Il comporte plusieurs éléments interactifs et prend en charge le mode sombre.
Composant de pagination
Composant de pagination avec micro-interactions pour un portfolio, à l’aide d’un schéma de couleurs triadique. Conception réactive avec prise en charge du thème sombre, pas de JavaScript.