NeonGlowPagination
A responsive pagination component with neon/glow effects, using a forest/green color palette suitable for cryptocurrency and blockchain applications. Features dark mode support and semantic HTML.
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>Related Components
Pagination Component
Pagination Component for Dark Mode UI with responsive effects and dark theme support.
Pagination Component
Pagination component with microinteractions for a portfolio, using a triadic color scheme. Responsive design with dark theme support, no JavaScript.
Gradient_Color_Transition_Pagination_Photography_Complex
A complex, responsive pagination component designed for photography portfolios, featuring heavy use of color gradients and smooth transitions with complementary colors. Includes dark mode support and interactive elements.