Components Pagination Pagination Component

Pagination Component

Responsive Pagination Component with 3D, Triadic Color, Simple, Business/Corporate Style, and Dark Mode Support

Preview

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 in a brutalist style, suitable for business/corporate websites, featuring a triadic color scheme and dark mode support.

Open

Neumorphic Pagination Component

A Neumorphic Pagination component with dark mode support.

Open

Gradient_Color_Transition_Pagination_Photography_Complex

A complex, responsive pagination component designed for photography portfolios, featuring heavy use of color gradients and smooth transitions with complementary colors. Includes dark mode support and interactive elements.

Open