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

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.

Ouvrir

Brutalist_Retro_Pagination

Un composant de pagination simple, de style brutaliste avec une palette de couleurs rétro, adapté aux sites d’information et de journalisme. Dispose d’un contraste élevé, d’une typographie audacieuse et d’une prise en charge du mode sombre.

Ouvrir

Composant de pagination

Un composant de pagination réactif conçu avec un style brutaliste, utilisant des tons de terre et une complexité modérée pour un site Web d’entreprise, avec prise en charge du thème sombre.

Ouvrir