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
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.
Glassmorphism Pagination Component
A responsive pagination component designed with glassmorphism and a triadic color scheme, suitable for blog and content reading. It features multiple interactive elements and supports dark mode.
Brutal Pagination Component
A simple, brutalist-style pagination component for social media interfaces with pastel colors, dark mode support, and responsiveness.