Artistic_Sepia_Pagination_Component
Un composant de pagination complexe et artistique avec des tons sépia/bruns, inspiré des textures aquarelles, adapté aux outils CRM/Business. Entièrement réactif avec prise en charge du mode sombre.
HTML Code
<nav class="flex items-center justify-between px-4 sm:px-6 lg:px-8 py-3 bg-gradient-to-br from-amber-50 to-amber-100 dark:from-stone-900 dark:to-stone-950 rounded-2xl shadow-xl font-sans text-stone-800 dark:text-stone-300 relative overflow-hidden" aria-label="Pagination">
<!-- Background texture overlay -->
<div class="absolute inset-0 opacity-20 dark:opacity-10" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZmlsdGVyIGlkPSJlZmZlY3QiPgogICAgPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsdE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjA1IiBudW1PY3RhdmVzPSIxIiBzdGl0Y2hUYWlscz0icmFnd2VkIiBzdGl0Y2hUYWlscz0icmFnd2VkIiByZXN1bHQ9InR1cmJ1bGVuY2UiLz4KICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz4KICAgIDxmZUNvbXBvc2l0ZSBpbj0iU291cmNlQWxwaGEiIGluMj0idHVyYnVsZW5jZSIgb3BlcmF0b3I9ImluIiByZXN1bHQ9ImJsdXJlZF9ub2lzZSIvPgogICAgPGZlQmxlbmQgaW49IldhdGVybWFyayIgJmlubzI9ImJsdXJlZF9ub2lzZSIgbW9kZT0ibXVsdGlwbHkiLz4KICA8L2ZpbHRlcj4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJyZ2JhKDIxNywgMTk5LCAxNjgsIDAuMzUpIiBmaWx0ZXI9InVybCgjZWZmZWN0KSIgLz4KPC9zdmc+')"></div>
<div class="flex-1 flex justify-between items-center">
<!-- Previous Button -->
<div class="w-auto md:w-1/3 order-1">
<a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-full border border-stone-300 dark:border-stone-700 bg-stone-200 hover:bg-stone-300 dark:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 ease-in-out text-stone-700 dark:text-stone-300 shadow-sm group">
<svg class="h-5 w-5 mr-2 -ml-1 text-stone-600 dark:text-stone-400 group-hover:text-stone-800 dark:group-hover:text-stone-200" 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-3.75a.75.75 0 010-1.06l3.75-3.75a.75.75 0 011.06 0z" clip-rule="evenodd" />
</svg>
<span class="hidden sm:inline">Previous</span>
<span class="sm:hidden">Prev</span>
</a>
</div>
<!-- Page Numbers (Desktop/Tablet) -->
<div class="hidden md:flex justify-center flex-1 order-2 space-x-2">
<a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-full border border-transparent text-stone-600 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-200 ease-in-out">
1
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-full border border-transparent text-stone-600 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-200 ease-in-out">
2
</a>
<a href="#" aria-current="page" class="relative z-10 inline-flex items-center px-4 py-2 text-sm font-semibold rounded-full border border-amber-400 dark:border-amber-600 bg-amber-300 dark:bg-amber-700 text-stone-900 dark:text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-amber-50">3</a>
<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-stone-500 dark:text-stone-500 rounded-full">
...
</span>
<a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-full border border-transparent text-stone-600 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-200 ease-in-out">
10
</a>
</div>
<!-- Page Status (Mobile) -->
<div class="flex md:hidden flex-1 justify-center order-2 text-sm font-medium text-stone-700 dark:text-stone-300">
Page <span class="font-semibold mx-1">3</span> of <span class="font-semibold mx-1">10</span>
</div>
<!-- Next Button -->
<div class="w-auto md:w-1/3 order-3 flex justify-end">
<a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-full border border-stone-300 dark:border-stone-700 bg-stone-200 hover:bg-stone-300 dark:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 ease-in-out text-stone-700 dark:text-stone-300 shadow-sm group">
<span class="hidden sm:inline">Next</span>
<span class="sm:hidden">Next</span>
<svg class="h-5 w-5 ml-2 -mr-1 text-stone-600 dark:text-stone-400 group-hover:text-stone-800 dark:group-hover:text-stone-200" 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 3.75a.75.75 0 010 1.06l-3.75 3.75a.75.75 0 01-1.06 0z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<!-- Entries label (Desktop Only) -->
<div class="absolute hidden lg:flex left-8 top-1/2 -translate-y-1/2 text-sm text-stone-600 dark:text-stone-400">
<p class="mr-2">Showing</p>
<p class="font-semibold text-stone-800 dark:text-stone-200 inline-block">1</p>
<p class="mx-1">to</p>
<p class="font-semibold text-stone-800 dark:text-stone-200 inline-block">10</p>
<p class="ml-1">of</p>
<p class="font-semibold text-stone-800 dark:text-stone-200 inline-block ml-1">97</p>
<p class="ml-1">entries</p>
</div>
<!-- Dropdown for Results per Page (Desktop Only) -->
<div class="absolute hidden lg:flex right-8 top-1/2 -translate-y-1/2 text-sm text-stone-600 dark:text-stone-400 items-center">
<label for="results-per-page" class="mr-2">Results Per Page:</label>
<select id="results-per-page" name="results-per-page" class="block w-auto py-1.5 pl-3 pr-8 rounded-full border border-stone-300 dark:border-stone-700 bg-stone-100 dark:bg-stone-800 text-stone-800 dark:text-stone-300 sm:text-sm shadow-sm focus:border-amber-500 focus:ring-amber-500 transition-colors duration-200 ease-in-out cursor-pointer">
<option value="10" selected>10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
</nav>Composants associés
Pagination du commerce électronique
Un composant de pagination réactif inspiré du Material Design avec prise en charge du thème sombre, adapté aux listes de produits de commerce électronique. Implémente un schéma de couleurs complémentaire et une complexité modérée avec des états de boutons interactifs utilisant uniquement HTML et Tailwind CSS.
Composant de pagination
Un composant de pagination réactif conçu avec des éléments 3D et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Neon_Glow_Pagination_Sports_Fitness
Un composant de pagination simple et réactif avec un effet néon/lueur, une palette de couleurs triadique, conçu pour les applications de sport et de fitness, avec prise en charge du mode sombre.