Componentes Paginación Componente de paginación

Componente de paginación

Un componente de paginación skeuomórfico diseñado para el consumo de contenido de blog con tonos tierra y soporte para temas oscuros.

Vista previa

Código HTML

<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>

Componentes relacionados

Componente de paginación de neumorfismo

Un componente de paginación con diseño de neumorfismo, combinación de colores pastel y complejidad moderada. Está diseñado para portafolios e incluye diseño responsivo y soporte para temas oscuros utilizando solo HTML y Tailwind CSS.

Abrir

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.

Abrir

Componente de paginación

Componente de paginación para la interfaz de usuario del modo oscuro con efectos responsivos y soporte para temas oscuros.

Abrir