E-commerce Pagination
A responsive Material Design inspired pagination component with dark theme support, suitable for e-commerce product listings. Implements a complementary color scheme and moderate complexity with interactive button states using only HTML and Tailwind CSS.
HTML Code
<nav aria-label="Pagination" class="flex justify-center items-center space-x-2 my-4 dark:bg-gray-800 p-2 rounded-md">
<button class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
Previous
</button>
<a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-blue-200 rounded-md hover:bg-blue-300 dark:bg-blue-700 dark:text-blue-200 dark:hover:bg-blue-600">
1
</a>
<a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
2
</a>
<a href="#" aria-current="page" class="px-3 py-2 text-sm font-medium text-white bg-blue-500 rounded-md dark:bg-blue-500">
3
</a>
<a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
4
</a>
<a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
5
</a>
<button class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
Next
</button>
</nav>Related Components
Pagination Component
Responsive Pagination Component with 3D, Triadic Color, Simple, Business/Corporate Style, and Dark Mode Support
Pagination Component
Pagination Component for Dark Mode UI with responsive effects and dark theme support.
Pagination Component
A responsive pagination component designed in a brutalist style, suitable for business/corporate websites, featuring a triadic color scheme and dark mode support.