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.
HTML Code
<nav class="flex items-center justify-between px-4 py-3 sm:px-6 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 shadow-lg rounded-xl max-w-4xl mx-auto my-8 overflow-hidden" 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-transparent text-sm font-medium rounded-md text-white dark:text-gray-200 bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-700 dark:to-indigo-700 hover:from-purple-700 hover:to-indigo-700 dark:hover:from-purple-800 dark:hover:to-indigo-800 transition-all duration-300 ease-in-out shadow-md hover:shadow-lg">
Previous
</a>
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white dark:text-gray-200 bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-700 dark:to-indigo-700 hover:from-purple-700 hover:to-indigo-700 dark:hover:from-purple-800 dark:hover:to-indigo-800 transition-all duration-300 ease-in-out shadow-md hover:shadow-lg">
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 group">
Showing
<span class="font-medium bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-orange-500 dark:from-pink-400 dark:to-orange-400">1</span>
to
<span class="font-medium bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-orange-500 dark:from-pink-400 dark:to-orange-400">10</span>
of
<span class="font-medium bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-orange-500 dark:from-pink-400 dark:to-orange-400">97</span>
results
</p>
</div>
<div>
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 group">
<span class="sr-only">Previous</span>
<svg class="h-5 w-5 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors duration-200" 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 relative inline-flex items-center px-4 py-2 border text-sm font-medium bg-gradient-to-r from-blue-500 to-green-500 text-white dark:from-blue-600 dark:to-green-600 dark:text-gray-100 border-blue-500 dark:border-blue-600 shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105">
1
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 transform hover:scale-105 hover:from-purple-400 hover:to-pink-400 group">
<span class="group-hover:bg-clip-text group-hover:text-transparent group-hover:bg-gradient-to-r from-purple-500 to-red-500">2</span>
</a>
<a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 transform hover:scale-105 hover:from-purple-400 hover:to-pink-400 group">
<span class="group-hover:bg-clip-text group-hover:text-transparent group-hover:bg-gradient-to-r from-purple-500 to-red-500">3</span>
</a>
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 select-none">
...
</span>
<a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 transform hover:scale-105 group">
<span class="group-hover:bg-clip-text group-hover:text-transparent group-hover:bg-gradient-to-r from-purple-500 to-red-500">9</span>
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 transform hover:scale-105 group">
<span class="group-hover:bg-clip-text group-hover:text-transparent group-hover:bg-gradient-to-r from-purple-500 to-red-500">10</span>
</a>
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 group">
<span class="sr-only">Next</span>
<svg class="h-5 w-5 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors duration-200" 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 10l-3.293-3.293a1 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
Composant de pagination
Composant de pagination avec style de design rétro/vintage, schéma de couleurs triadique, complexité simple, à des fins de blog/contenu, en utilisant Tailwind CSS. Conception réactive avec prise en charge du thème 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.
Industrial_Vibrant_Pagination_Component
Un composant de pagination complexe, de style industriel, avec des couleurs vives, conçu pour les sites Web à but non lucratif/caritatifs. Présente l’esthétique des matériaux bruts, les éléments exposés, et offre une réactivité totale et une prise en charge du mode sombre.