Composants Pagination Pagination du commerce électronique

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.

Aperçu

HTML Code

<nav aria-label="Pagination" class="flex justify-center items-center space-x-2 my-4 dark:bg-gray-800 p-2 rounded-md">
  <button class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    Previous
  </button>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-blue-200 rounded-md hover:bg-blue-300 dark:bg-blue-700 dark:text-blue-200 dark:hover:bg-blue-600">
    1
  </a>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    2
  </a>
  <a href="#" aria-current="page" class="px-3 py-2 text-sm font-medium text-white bg-blue-500 rounded-md dark:bg-blue-500">
    3
  </a>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    4
  </a>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    5
  </a>
  <button class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    Next
  </button>
</nav>

Composants associés

Composant de pagination

Composant de pagination réactif avec prise en charge de la 3D, de la couleur triadique, du style simple, du style professionnel/d’entreprise et du mode sombre

Ouvrir

Pagination d’entreprise Art Déco

Un composant de pagination sophistiqué inspiré de l’esthétique Art déco, avec des motifs géométriques et une palette de couleurs bleues d’entreprise. Il est réactif, inclut la prise en charge du mode sombre et convient aux sites Web d’entreprise professionnels.

Ouvrir

Composant de pagination

Composant de pagination avec micro-interactions pour un portfolio, à l’aide d’un schéma de couleurs triadique. Conception réactive avec prise en charge du thème sombre, pas de JavaScript.

Ouvrir