Gradient_Color_Transition_Pagination_Photography_Complex
Un componente di impaginazione complesso e reattivo progettato per i portfolio fotografici, caratterizzato da un uso intensivo di sfumature di colore e transizioni fluide con colori complementari. Include il supporto della modalità oscura ed elementi interattivi.
Codice HTML
<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>Componenti correlati
Industrial_Vibrant_Pagination_Component
Un componente di impaginazione complesso, in stile industriale, con colori vivaci, progettato per siti Web senza scopo di lucro/beneficenza. Presenta l'estetica delle materie prime, gli elementi esposti e fornisce piena reattività e supporto per la modalità oscura.
Componente di impaginazione brutale
Un semplice componente di impaginazione in stile brutalista per le interfacce dei social media con colori pastello, supporto per la modalità oscura e reattività.
Componente di impaginazione
Un componente di impaginazione reattivo e monocromatico ispirato al 3D per le interfacce dei social media, con supporto per la modalità scura, realizzato con Tailwind CSS.