Pagination Component
A responsive Pagination Component designed with a Brutalism style, utilizing Earth tones and moderate complexity for a business/corporate website, with dark theme support.
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>Related Components
Pagination Component
A simple and elegant dark mode pagination component with pastel colors, suitable for social media applications. It features a responsive design and uses Tailwind CSS for styling, including dark mode support.
Pagination Component
A simple responsive pagination component designed for dark mode with an analogous color scheme, suitable for a portfolio.
Neumorphism Pagination Component
A pagination component with Neumorphism design, pastel color scheme, and moderate complexity. It is designed for portfolios and includes responsive design and dark theme support using only HTML and Tailwind CSS.