Componentes Paginación Componente de paginación

Componente de paginación

Un componente de paginación responsivo diseñado en un estilo brutalista, adecuado para sitios web comerciales / corporativos, con un esquema de color triádico y soporte para modo oscuro.

Vista previa

Código HTML

<div class="flex justify-center items-center space-x-4 py-8">
    <a href="#" class="px-4 py-2 text-white bg-yellow-400 dark:bg-yellow-600 rounded-lg font-bold uppercase tracking-wide hover:bg-yellow-500 dark:hover:bg-yellow-700">Prev</a>
    <span class="text-white dark:text-gray-300">Page 1 of 10</span>
    <a href="#" class="px-4 py-2 text-white bg-yellow-400 dark:bg-yellow-600 rounded-lg font-bold uppercase tracking-wide hover:bg-yellow-500 dark:hover:bg-yellow-700">Next</a>
</div>

<div class="flex justify-center items-center space-x-2">
    <a href="#" class="px-3 py-1 text-gray-800 bg-blue-300 dark:bg-blue-700 rounded-lg font-bold hover:bg-blue-400 dark:hover:bg-blue-800">1</a>
    <a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">2</a>
    <a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">3</a>
    <a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">4</a>
    <a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">5</a>
</div>

<div class="flex justify-center items-center space-x-4 mt-4">
    <a href="#" class="px-4 py-2 text-white bg-yellow-400 dark:bg-yellow-600 rounded-lg font-bold uppercase tracking-wide hover:bg-yellow-500 dark:hover:bg-yellow-700">Last</a>
</div>

Componentes relacionados

Componente de paginación

Un componente de paginación monocromático y receptivo inspirado en 3D para interfaces de redes sociales, con soporte para modo oscuro, construido con Tailwind CSS.

Abrir

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.

Abrir

LuxuryPaginationComponent

Un componente de paginación elegante y sofisticado diseñado para sitios de documentación o wiki, con una sensación de lujo/premium, combinación de colores complementaria y ricos elementos interactivos. Totalmente receptivo con soporte para modo oscuro.

Abrir