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

Gradient_Color_Transition_Pagination_Photography_Complex

Un composant de pagination complexe et réactif conçu pour les portfolios de photographie, avec une utilisation intensive de dégradés de couleurs et des transitions fluides avec des couleurs complémentaires. Comprend la prise en charge du mode sombre et des éléments interactifs.

Ouvrir

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.

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