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.
HTML Code
<nav class="flex items-center justify-between px-4 py-3 sm:px-6 bg-gradient-to-r from-blue-900 to-blue-700 dark:from-gray-900 dark:to-gray-800 text-white shadow-lg font-sans rounded-lg border border-blue-600 dark:border-gray-700" aria-label="Pagination">
<div class="hidden sm:block">
<p class="text-sm text-blue-200 dark:text-gray-400">
Showing
<span class="font-medium">1</span>
to
<span class="font-medium">10</span>
of
<span class="font-medium">97</span>
results
</p>
</div>
<div class="flex flex-1 justify-between sm:justify-end">
<a href="#"
class="relative inline-flex items-center rounded-l-md border border-r-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out group">
<svg class="h-5 w-5 mr-2 text-blue-200 group-hover:text-blue-100 transition-colors duration-200 dark:text-gray-400 dark:group-hover:text-gray-300" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M12.79 5.23a.75.75 0 010 1.06L9.56 10l3.23 3.71a.75.75 0 11-1.06 1.06l-3.75-4.25a.75.75 0 010-1.06l3.75-4.25a.75.75 0 011.06 0z"
clip-rule="evenodd" />
</svg>
Previous
</a>
<div class="hidden sm:flex rounded-r-md border border-l-0 border-blue-500 dark:border-gray-600">
<a href="#"
class="relative inline-flex items-center border border-r-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
1
</a>
<a href="#"
class="relative inline-flex items-center bg-blue-500 dark:bg-gray-600 px-4 py-2 text-sm font-medium text-white dark:text-gray-100 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out border border-blue-500 dark:border-gray-600">
2
</a>
<a href="#"
class="relative hidden md:inline-flex items-center border border-r-0 border-l-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
3
</a>
<span
class="relative inline-flex items-center border border-r-0 border-l-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-200 dark:text-gray-400">
...
</span>
<a href="#"
class="relative hidden md:inline-flex items-center border border-r-0 border-l-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
8
</a>
<a href="#"
class="relative inline-flex items-center border border-r-0 border-l-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
9
</a>
<a href="#"
class="relative inline-flex items-center border border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
10
</a>
</div>
<a href="#"
class="relative inline-flex items-center rounded-r-md border border-l-0 border-r border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out group">
Next
<svg class="h-5 w-5 ml-2 text-blue-200 group-hover:text-blue-100 transition-colors duration-200 dark:text-gray-400 dark:group-hover:text-gray-300" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 010-1.06L10.44 10 7.21 6.29a.75.75 0 111.06-1.06l3.75 4.25a.75.75 0 010 1.06l-3.75 4.25a.75.75 0 01-1.06 0z"
clip-rule="evenodd" />
</svg>
</a>
</div>
</nav>Related Components
Retro_Grayscale_Crypto_Pagination
A complex, retro/vintage styled pagination component for cryptocurrency/blockchain applications, using a grayscale color scheme. It's fully responsive and supports dark mode.
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.
Industrial_Vibrant_Pagination_Component
A complex, industrial-style pagination component with vibrant colors, designed for non-profit/charity websites. Features raw materials aesthetics, exposed elements, and provides full responsiveness and dark mode support.