OrganicPaginationComponent
Un componente de paginación inspirado en la naturaleza para uso en el mercado, con líneas fluidas, estética en blanco y negro con un acento brillante y capacidad de respuesta total con soporte para modo oscuro.
Código HTML
<nav class="flex items-center justify-between px-4 py-3 sm:px-6" aria-label="Pagination">
<div class="flex-1 flex justify-between sm:hidden">
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
Previous
</a>
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
Next
</a>
</div>
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700 dark:text-gray-300">
Showing
<span class="font-medium">1</span>
to
<span class="font-medium">10</span>
of
<span class="font-medium">97</span>
results
</p>
</div>
<div>
<nav class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
<span class="sr-only">Previous</span>
<!-- Heroicon name: solid/chevron-left -->
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</a>
<!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
<a href="#" aria-current="page" class="z-10 bg-gradient-to-br from-indigo-500 to-purple-600 border-indigo-500 text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium transition-all duration-300 ease-in-out transform hover:scale-105">
1
</a>
<a href="#" class="bg-white border-gray-300 text-gray-700 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
2
</a>
<a href="#" class="bg-white border-gray-300 text-gray-700 hidden lg:inline-flex relative items-center px-4 py-2 border text-sm font-medium hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
3
</a>
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
...
</span>
<a href="#" class="bg-white border-gray-300 text-gray-700 hidden lg:inline-flex relative items-center px-4 py-2 border text-sm font-medium hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
9
</a>
<a href="#" class="bg-white border-gray-300 text-gray-700 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
10
</a>
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
<span class="sr-only">Next</span>
<!-- Heroicon name: solid/chevron-right -->
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
</nav>
</div>
</div>
</nav>Componentes relacionados
Componente de paginación
Componente de paginación con microinteracciones para un portafolio, utilizando un esquema de color triádico. Diseño responsivo con soporte para temas oscuros, sin JavaScript.
Componente de paginación
Componente de paginación responsivo con soporte 3D, color triádico, simple, estilo empresarial/corporativo y modo oscuro
Skeuomorphic_Purple_Pagination
Un componente de paginación complejo y esqueuomórfico diseñado para sitios web de consultoría/servicios, con un esquema de color púrpura/violeta y una capacidad de respuesta completa con soporte para modo oscuro.