Composants Pagination Composant de pagination

Composant de pagination

Un composant de pagination réactif conçu dans un style brutaliste, adapté aux sites Web d’entreprise, doté d’une palette de couleurs triadique et d’un support en mode sombre.

Aperçu

HTML Code

<div class="flex justify-center items-center space-x-4 py-8">
    <a href="#" class="px-4 py-2 text-white bg-yellow-400 dark:bg-yellow-600 rounded-lg font-bold uppercase tracking-wide hover:bg-yellow-500 dark:hover:bg-yellow-700">Prev</a>
    <span class="text-white dark:text-gray-300">Page 1 of 10</span>
    <a href="#" class="px-4 py-2 text-white bg-yellow-400 dark:bg-yellow-600 rounded-lg font-bold uppercase tracking-wide hover:bg-yellow-500 dark:hover:bg-yellow-700">Next</a>
</div>

<div class="flex justify-center items-center space-x-2">
    <a href="#" class="px-3 py-1 text-gray-800 bg-blue-300 dark:bg-blue-700 rounded-lg font-bold hover:bg-blue-400 dark:hover:bg-blue-800">1</a>
    <a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">2</a>
    <a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">3</a>
    <a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">4</a>
    <a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">5</a>
</div>

<div class="flex justify-center items-center space-x-4 mt-4">
    <a href="#" class="px-4 py-2 text-white bg-yellow-400 dark:bg-yellow-600 rounded-lg font-bold uppercase tracking-wide hover:bg-yellow-500 dark:hover:bg-yellow-700">Last</a>
</div>

Composants associés

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.

Ouvrir

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.

Ouvrir

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.

Ouvrir