Componentes Paginación Componente de paginación

Componente de paginación

Un componente de paginación responsivo diseñado con elementos 3D y soporte de temas oscuros mediante Tailwind CSS.

Vista previa

Código HTML

<div class="flex justify-center items-center mt-6">
    <nav aria-label="Pagination">
        <ul class="flex space-x-4">
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">
                    <span class="material-icons">chevron_left</span>
                </a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">1</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">2</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">3</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">...</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">10</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">
                    <span class="material-icons">chevron_right</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: #1f2937;
    }
    .text-gray-700 {
        color: #e5e7eb;
    }
    .border-gray-300 {
        border-color: #4b5563;
    }
}
</style>

Componentes relacionados

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

Componente de paginación

Un componente de paginación de modo oscuro simple y elegante con colores pastel, adecuado para aplicaciones de redes sociales. Cuenta con un diseño responsivo y utiliza Tailwind CSS para el estilo, incluida la compatibilidad con el modo oscuro.

Abrir

Componente de paginación

Componente de paginación responsivo con soporte 3D, color triádico, simple, estilo empresarial/corporativo y modo oscuro

Abrir