Pagination Component
A skeuomorphic pagination component designed for blog content consumption with earth tones and dark theme support.
HTML Code
<div class="flex justify-center items-center space-x-4 py-4">
<button class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full px-4 py-2 shadow-lg hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300">
Previous
</button>
<span class="text-gray-800 dark:text-gray-200">Page <strong>1</strong> of <strong>10</strong></span>
<button class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full px-4 py-2 shadow-lg hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300">
Next
</button>
</div>
<div class="flex justify-center space-x-2 py-4">
<button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
1
</button>
<button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
2
</button>
<button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
3
</button>
<button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
4
</button>
<button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
5
</button>
</div>
<div class="flex justify-center items-center space-x-4 py-4">
<span class="text-gray-800 dark:text-gray-200">Jump to page:</span>
<input type="number" min="1" max="10" class="w-12 px-2 py-1 border-2 border-gray-400 dark:border-gray-600 rounded bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition duration-300 focus:outline-none focus:border-gray-600 dark:focus:border-gray-400" />
</div>Related Components
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.
Pagination Component
Pagination component with microinteractions for a portfolio, using a triadic color scheme. Responsive design with dark theme support, no JavaScript.