OrganicPaginationComponent
Un composant de pagination inspiré de la nature pour une utilisation sur le marché, avec des lignes fluides, une esthétique en noir et blanc avec un accent vif et une réactivité totale avec la prise en charge du mode sombre.
HTML Code
<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>Composants associés
LuxuryPaginationComposant
Un composant de pagination élégant et sophistiqué conçu pour la documentation ou les sites wiki, avec une sensation de luxe/premium, une palette de couleurs complémentaire et des éléments interactifs riches. Entièrement réactif avec prise en charge du mode sombre.
Composant de pagination neumorphe
Un composant de pagination neumorphique avec prise en charge du mode sombre.
Composant de pagination neumorphe
Un composant de pagination réactif et interactif stylisé en Neumorphism pour une interface de blog, avec prise en charge du mode sombre.