NeonGlowPaginierung
Eine reaktionsschnelle Paginierungskomponente mit Neon-/Leuchteffekten, die eine Wald-/Grün-Farbpalette verwendet, die für Kryptowährungs- und Blockchain-Anwendungen geeignet ist. Bietet Unterstützung für den Dunkelmodus und semantisches 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>Verwandte Komponenten
Artistic_Sepia_Pagination_Component
Eine komplexe, künstlerische Paginierungskomponente mit Sepia-/Brauntönen, inspiriert von Aquarelltexturen, geeignet für CRM/Business Tools. Vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.
E-Commerce-Paginierung
Eine von Responsive Material Design inspirierte Paginierungskomponente mit Unterstützung für dunkle Themen, die sich für E-Commerce-Produktangebote eignet. Implementiert ein komplementäres Farbschema und moderate Komplexität mit interaktiven Schaltflächenzuständen, die nur HTML und Tailwind CSS verwenden.
Paginierungskomponente
Paginierungskomponente mit Mikrointeraktionen für ein Portfolio unter Verwendung eines triadischen Farbschemas. Responsives Design mit Unterstützung für dunkle Themen, kein JavaScript.