Paginierungskomponente
Eine reaktionsschnelle Paginierungskomponente, die im Brutalismus-Stil entwickelt wurde und Erdtöne und moderate Komplexität für eine Geschäfts-/Unternehmenswebsite verwendet, mit Unterstützung für dunkle Themen.
HTML-Code
<div class="flex justify-center items-center space-x-4 py-4">
<button class="border-2 border-brown-600 text-brown-600 dark:border-brown-300 dark:text-brown-300 px-4 py-2 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
Previous
</button>
<span class="text-brown-600 dark:text-brown-300">Page 1 of 10</span>
<button class="border-2 border-brown-600 text-brown-600 dark:border-brown-300 dark:text-brown-300 px-4 py-2 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
Next
</button>
</div>
<div class="flex justify-center items-center space-x-2 py-4">
<button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
1
</button>
<button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
2
</button>
<button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
3
</button>
<button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
4
</button>
<button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
5
</button>
</div>
<div class="flex justify-center items-center space-x-4 py-4">
<button class="border-2 border-brown-600 text-brown-600 dark:border-brown-300 dark:text-brown-300 px-4 py-2 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
Last
</button>
</div>Verwandte Komponenten
Paginierungskomponente
Eine reaktionsschnelle Paginierungskomponente, die mit 3D-Elementen und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS entwickelt wurde.
Paginierungskomponente
Eine einfache und elegante Paginierungskomponente im Dark-Modus mit Pastellfarben, die für Social-Media-Anwendungen geeignet ist. Es verfügt über ein responsives Design und verwendet Tailwind CSS für das Styling, einschließlich Unterstützung des Dunkelmodus.
Glassmorphism Paginierungskomponente
Eine reaktionsschnelle Paginierungskomponente, die mit Glasmorphismus und einem triadischen Farbschema entwickelt wurde und sich für das Lesen von Blogs und Inhalten eignet. Es verfügt über mehrere interaktive Elemente und unterstützt den Dunkelmodus.