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
Responsive Paginierungskomponente mit Unterstützung für 3D, Triadic Color, Simple, Business/Corporate Style und Dark Mode
Neumorphismus-Paginierungskomponente
Neumorphism Paginierungskomponente für E-Commerce mit Tailwind CSS
Paginierungskomponente
Eine reaktionsschnelle Paginierungskomponente in einem brutalistischen Stil, die für Geschäfts-/Unternehmenswebsites geeignet ist und ein triadisches Farbschema und Unterstützung für den Dunkelmodus bietet.