NéonGlowPagination
Un composant de pagination réactif avec des effets de néon/lueur, utilisant une palette de couleurs forêt/vert adaptée aux applications de crypto-monnaie et de blockchain. Dispose de la prise en charge du mode sombre et du HTML sémantique.
HTML Code
<nav class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 font-sans" aria-label="Pagination">
<ul class="flex list-none p-0 m-0">
<li>
<a href="#" class="relative inline-flex items-center justify-center px-3 py-2 mr-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
hover:bg-gray-50 dark:hover:bg-gray-700
focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
transition-all duration-300 ease-in-out
group
overflow-hidden">
<span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 010 1.06L9.56 10l3.23 3.71a.75.75 0 11-1.06 1.06l-3.75-3.75a.75.75 0 010-1.06l3.75-3.75a.75.75 0 011.06 0z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Previous</span>
</a>
</li>
<li>
<a href="#" aria-current="page" class="relative inline-flex items-center justify-center px-4 py-2 mx-1 text-sm font-semibold
text-white bg-emerald-600 dark:bg-emerald-700 border border-emerald-600 dark:border-emerald-700 rounded-lg shadow-md
ring-2 ring-emerald-500 ring-offset-1 ring-offset-transparent dark:ring-offset-transparent
glow-emerald
transition-all duration-300 ease-in-out
overflow-hidden">
<span class="absolute inset-0 bg-emerald-400 dark:bg-emerald-500 opacity-20 blur-md animate-pulse"></span>
<span class="relative z-10">1</span>
</a>
</li>
<li>
<a href="#" class="relative inline-flex items-center justify-center px-4 py-2 mx-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
hover:bg-gray-50 dark:hover:bg-gray-700
focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
transition-all duration-300 ease-in-out
group
overflow-hidden">
<span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></span>
<span class="relative z-10">2</span>
</a>
</li>
<li class="hidden sm:block">
<a href="#" class="relative inline-flex items-center justify-center px-4 py-2 mx-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
hover:bg-gray-50 dark:hover:bg-gray-700
focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
transition-all duration-300 ease-in-out
group
overflow-hidden">
<span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></span>
<span class="relative z-10">3</span>
</a>
</li>
<li class="hidden md:block">
<span class="px-4 py-2 mx-1 text-sm font-medium text-gray-500Dark:text-gray-400">...</span>
</li>
<li class="hidden md:block">
<a href="#" class="relative inline-flex items-center justify-center px-4 py-2 mx-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
hover:bg-gray-50 dark:hover:bg-gray-700
focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
transition-all duration-300 ease-in-out
group
overflow-hidden">
<span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></span>
<span class="relative z-10">9</span>
</a>
</li>
<li>
<a href="#" class="relative inline-flex items-center justify-center px-4 py-2 mx-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
hover:bg-gray-50 dark:hover:bg-gray-700
focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
transition-all duration-300 ease-in-out
group
overflow-hidden">
<span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></span>
<span class="relative z-10">10</span>
</a>
</li>
<li>
<a href="#" class="relative inline-flex items-center justify-center px-3 py-2 ml-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
hover:bg-gray-50 dark:hover:bg-gray-700
focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
transition-all duration-300 ease-in-out
group
overflow-hidden">
<span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 010-1.06L10.44 10 7.21 6.29a.75.75 0 111.06-1.06l3.75 3.75a.75.75 0 010 1.06l-3.75 3.75a.75.75 0 01-1.06 0z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<style>
/* This is a simple pseudo-element glow. For a more advanced glow, consider using multiple box-shadows with different opacities and offsets, or SVG filters. */
.glow-emerald {
position: relative;
box-shadow: 0 0 5px rgba(16, 185, 129, 0.5), /* emerald-500 */
0 0 10px rgba(16, 185, 129, 0.4),
0 0 15px rgba(16, 185, 129, 0.3);
}
.dark .glow-emerald {
box-shadow: 0 0 5px rgba(5, 150, 105, 0.6), /* emerald-600 */
0 0 10px rgba(5, 150, 105, 0.5),
0 0 15px rgba(5, 150, 105, 0.4);
}
@keyframes pulse {
0%, 100% {
opacity: 0.2;
}
50% {
opacity: 0.4;
}
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style>Composants associés
Artistic_Sepia_Pagination_Component
Un composant de pagination complexe et artistique avec des tons sépia/bruns, inspiré des textures aquarelles, adapté aux outils CRM/Business. Entièrement réactif avec prise en charge du mode sombre.
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.
Gradient_Color_Transition_Pagination_Photography_Complex
Un composant de pagination complexe et réactif conçu pour les portfolios de photographie, avec une utilisation intensive de dégradés de couleurs et des transitions fluides avec des couleurs complémentaires. Comprend la prise en charge du mode sombre et des éléments interactifs.