Componente de paginación neumórfica
Un componente de paginación interactivo y responsivo con estilo Neumorphism para una interfaz de blog, con soporte para el modo oscuro.
Código HTML
<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>Componentes relacionados
Brutalist_Retro_Pagination
Un componente de paginación simple de estilo brutalista con una combinación de colores retro, adecuado para sitios web de noticias y periodismo. Cuenta con alto contraste, tipografía en negrita y compatibilidad con el modo oscuro.
Componente de paginación
Componente de paginación responsivo con soporte 3D, color triádico, simple, estilo empresarial/corporativo y modo oscuro
Paginación de neón neomórfica para música/audio
Un componente de paginación responsivo diseñado con un estilo neumórfico y colores neón/eléctricos brillantes, adecuado para plataformas de audio y transmisión de música. Incluye soporte para modo oscuro.