Neumorphic Pagination Component
A responsive and interactive pagination component styled in Neumorphism for a blog interface, with support for dark mode.
HTML Code
<div class="flex items-center justify-center py-8"> <nav aria-label="Pagination" class="hidden md:flex space-x-2"> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">Previous</span> </button> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">1</span> </button> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">2</span> </button> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">3</span> </button> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">Next</span> </button> </nav> <nav aria-label="Pagination" class="flex md:hidden space-x-2"> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">Previous</span> </button> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">Next</span> </button> </nav> <div class="flex rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 mt-5 items-center space-x-2"> <span class="text-gray-800 dark:text-gray-200">Page</span> <input type="number" class="w-12 text-center bg-transparent border-b border-gray-400 dark:border-gray-600 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500" value="1"> <span class="text-gray-800 dark:text-gray-200">of 3</span> </div></div>Related Components
Pagination Component
A skeuomorphic pagination component designed for blog content consumption with earth tones and dark theme support.
Pagination Component
A simple responsive pagination component designed for dark mode with an analogous color scheme, suitable for a portfolio.