Paginierungskomponente
Eine skeuomorphe Paginierungskomponente, die für den Konsum von Blog-Inhalten mit Unterstützung für Erdtöne und dunkle Themen entwickelt wurde.
HTML-Code
<div class="flex justify-center items-center space-x-4 py-4">
<button class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full px-4 py-2 shadow-lg hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300">
Previous
</button>
<span class="text-gray-800 dark:text-gray-200">Page <strong>1</strong> of <strong>10</strong></span>
<button class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full px-4 py-2 shadow-lg hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300">
Next
</button>
</div>
<div class="flex justify-center space-x-2 py-4">
<button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
1
</button>
<button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
2
</button>
<button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
3
</button>
<button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
4
</button>
<button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
5
</button>
</div>
<div class="flex justify-center items-center space-x-4 py-4">
<span class="text-gray-800 dark:text-gray-200">Jump to page:</span>
<input type="number" min="1" max="10" class="w-12 px-2 py-1 border-2 border-gray-400 dark:border-gray-600 rounded bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition duration-300 focus:outline-none focus:border-gray-600 dark:focus:border-gray-400" />
</div>Verwandte Komponenten
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.
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.
Glassmorphism_Pagination_CRM
Eine einfache, reaktionsschnelle Paginierungskomponente im Glassmorphism-Stil mit Pastellfarben, die für CRM-/Business-Tools geeignet ist, einschließlich Unterstützung des Dunkelmodus.