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
LuxuryPaginationComposant
Un composant de pagination élégant et sophistiqué conçu pour la documentation ou les sites wiki, avec une sensation de luxe/premium, une palette de couleurs complémentaire et des éléments interactifs riches. Entièrement réactif avec prise en charge du mode sombre.
Retro_Grayscale_Crypto_Pagination
Un composant de pagination complexe, de style rétro/vintage, pour les applications de crypto-monnaie/blockchain, utilisant un schéma de couleurs en niveaux de gris. Il est entièrement réactif et prend en charge le 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.