Pagination d’entreprise Art Déco
Un composant de pagination sophistiqué inspiré de l’esthétique Art déco, avec des motifs géométriques et une palette de couleurs bleues d’entreprise. Il est réactif, inclut la prise en charge du mode sombre et convient aux sites Web d’entreprise professionnels.
HTML Code
<nav class="flex items-center justify-between px-4 py-3 sm:px-6 bg-gradient-to-r from-blue-900 to-blue-700 dark:from-gray-900 dark:to-gray-800 text-white shadow-lg font-sans rounded-lg border border-blue-600 dark:border-gray-700" aria-label="Pagination">
<div class="hidden sm:block">
<p class="text-sm text-blue-200 dark:text-gray-400">
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 class="flex flex-1 justify-between sm:justify-end">
<a href="#"
class="relative inline-flex items-center rounded-l-md border border-r-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out group">
<svg class="h-5 w-5 mr-2 text-blue-200 group-hover:text-blue-100 transition-colors duration-200 dark:text-gray-400 dark:group-hover:text-gray-300" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M12.79 5.23a.75.75 0 010 1.06L9.56 10l3.23 3.71a.75.75 0 11-1.06 1.06l-3.75-4.25a.75.75 0 010-1.06l3.75-4.25a.75.75 0 011.06 0z"
clip-rule="evenodd" />
</svg>
Previous
</a>
<div class="hidden sm:flex rounded-r-md border border-l-0 border-blue-500 dark:border-gray-600">
<a href="#"
class="relative inline-flex items-center border border-r-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
1
</a>
<a href="#"
class="relative inline-flex items-center bg-blue-500 dark:bg-gray-600 px-4 py-2 text-sm font-medium text-white dark:text-gray-100 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out border border-blue-500 dark:border-gray-600">
2
</a>
<a href="#"
class="relative hidden md:inline-flex items-center border border-r-0 border-l-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
3
</a>
<span
class="relative inline-flex items-center border border-r-0 border-l-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-200 dark:text-gray-400">
...
</span>
<a href="#"
class="relative hidden md:inline-flex items-center border border-r-0 border-l-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
8
</a>
<a href="#"
class="relative inline-flex items-center border border-r-0 border-l-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
9
</a>
<a href="#"
class="relative inline-flex items-center border border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
10
</a>
</div>
<a href="#"
class="relative inline-flex items-center rounded-r-md border border-l-0 border-r border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out group">
Next
<svg class="h-5 w-5 ml-2 text-blue-200 group-hover:text-blue-100 transition-colors duration-200 dark:text-gray-400 dark:group-hover:text-gray-300" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 010-1.06L10.44 10 7.21 6.29a.75.75 0 111.06-1.06l3.75 4.25a.75.75 0 010 1.06l-3.75 4.25a.75.75 0 01-1.06 0z"
clip-rule="evenodd" />
</svg>
</a>
</div>
</nav>Composants associés
Composant de pagination
Un composant de pagination réactif simple conçu pour le mode sombre avec un schéma de couleurs analogue, adapté à un portfolio.
Composant de pagination
Un composant de pagination réactif conçu avec un style brutaliste, utilisant des tons de terre et une complexité modérée pour un site Web d’entreprise, avec prise en charge du thème sombre.
Gradient_Color_Transition_Pagination_Photography_Complex
Un composant de pagination complexe et réactif conçu pour les portfolios de photographie, avec une utilisation intensive de dégradés de couleurs et des transitions fluides avec des couleurs complémentaires. Comprend la prise en charge du mode sombre et des éléments interactifs.