Composants Pagination Composant de pagination brutale

Composant de pagination brutale

Un composant de pagination simple, de style brutaliste, pour les interfaces de médias sociaux avec des couleurs pastel, la prise en charge du mode sombre et la réactivité.

Aperçu

HTML Code

<nav aria-label="Pagination" class="flex justify-between text-pastel-600 dark:text-pastel-400 font-mono text-lg">
  <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">Previous</a>
  <div>
    <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1 transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">1</a>
    <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1 transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">2</a>
    <a href="#" aria-current="page" class="bg-pastel-400 dark:bg-pastel-600 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1">3</a>
    <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1 transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">4</a>
    <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1 transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">5</a>
  </div>
  <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">Next</a>
</nav>

Composants associés

Composant de pagination Glassmorphism

Un composant de pagination réactif conçu avec un glassmorphisme et une palette de couleurs triadique, adapté à la lecture de blogs et de contenus. Il comporte plusieurs éléments interactifs et prend en charge le mode sombre.

Ouvrir

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.

Ouvrir

Composant de pagination

Composant de pagination pour l’interface utilisateur du mode sombre avec effets réactifs et prise en charge du thème sombre.

Ouvrir