Glassmorphism_Pagination_CRM
Un composant de pagination simple, réactif, de style glassmorphism, avec des couleurs pastel, adapté aux outils CRM/Business, y compris la prise en charge du mode sombre.
HTML Code
<nav class="flex items-center justify-center p-4 bg-gradient-to-br from-purple-50 to-blue-50 dark:from-gray-800 dark:to-gray-900 min-h-[150px] sm:min-h-[200px] md:min-h-[250px] lg:min-h-[300px]">
<ul class="flex items-center space-x-2 sm:space-x-4 bg-white/30 backdrop-blur-md rounded-xl p-3 sm:p-4 shadow-lg border border-white/20 dark:bg-gray-700/30 dark:border-gray-600/20">
<li>
<a href="#" class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out group">
<svg class="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2 text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 transform group-hover:-translate-x-0.5 transition-transform" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
</svg>
Prev
</a>
</li>
<li>
<a href="#" class="relative hidden sm:inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out">
1
</a>
</li>
<li>
<a href="#" aria-current="page" class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-purple-800 bg-purple-200/60 rounded-lg ring-1 ring-inset ring-purple-300 dark:text-purple-200 dark:bg-purple-700/60 dark:ring-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-all duration-200 ease-in-out">
2
</a>
</li>
<li>
<a href="#" class="relative hidden sm:inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out">
3
</a>
</li>
<li>
<span class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 dark:text-gray-200">
...
</span>
</li>
<li>
<a href="#" class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out">
10
</a>
</li>
<li>
<a href="#" class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out group">
Next
<svg class="h-4 w-4 sm:h-5 sm:w-5 ml-1 sm:ml-2 text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 transform group-hover:translate-x-0.5 transition-transform" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
</svg>
</a>
</li>
</ul>
</nav>Composants associés
Pagination néomorphique au néon pour la musique/l’audio
Un composant de pagination réactif conçu avec un style neumorphique et des couleurs néon/électriques vives, adapté au streaming musical et aux plateformes audio. Inclut la prise en charge du mode sombre.
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.
Retro_Grayscale_Crypto_Pagination
Un composant de pagination complexe, de style rétro/vintage, pour les applications de crypto-monnaie/blockchain, utilisant un schéma de couleurs en niveaux de gris. Il est entièrement réactif et prend en charge le mode sombre.