Pagination Component
Responsive Pagination Component with 3D, Triadic Color, Simple, Business/Corporate Style, and Dark Mode Support
HTML Code
<nav aria-label="Pagination" class="flex justify-center items-center space-x-2 dark:bg-gray-800 p-4 rounded-md">
<a href="#" class="px-3 py-2 bg-blue-600 text-white rounded-md dark:bg-blue-800 dark:text-gray-200 transform transition duration-300 ease-in-out hover:scale-110">Previous</a>
<a href="#" class="px-3 py-2 bg-green-500 text-white rounded-md dark:bg-green-700 dark:text-gray-200 transform transition duration-300 ease-in-out hover:scale-110">1</a>
<a href="#" aria-current="page" class="px-3 py-2 bg-red-600 text-white rounded-md dark:bg-red-800 dark:text-gray-200 transform transition duration-300 ease-in-out hover:scale-110">2</a>
<a href="#" class="px-3 py-2 bg-green-500 text-white rounded-md dark:bg-green-700 dark:text-gray-200 transform transition duration-300 ease-in-out hover:scale-110">3</a>
<a href="#" class="px-3 py-2 bg-blue-600 text-white rounded-md dark:bg-blue-800 dark:text-gray-200 transform transition duration-300 ease-in-out hover:scale-110">Next</a>
</nav>Related Components
Pagination Component
A responsive Pagination component designed with 3D elements and dark theme support using Tailwind CSS.
Art Deco Corporate Pagination
A sophisticated pagination component inspired by Art Deco aesthetics, featuring geometric patterns and a corporate blue color scheme. It's responsive, includes dark mode support, and is suitable for professional business websites.
LuxuryPaginationComponent
An elegant and sophisticated pagination component designed for documentation or wiki sites, featuring a luxury/premium feel, complementary color scheme, and rich interactive elements. Fully responsive with dark mode support.