Composants Pagination Composant de pagination

Composant de pagination

Composant de pagination avec style de design rétro/vintage, schéma de couleurs triadique, complexité simple, à des fins de blog/contenu, en utilisant Tailwind CSS. Conception réactive avec prise en charge du thème sombre.

Aperçu

HTML Code

<nav aria-label="Pagination" class="flex justify-center items-center space-x-2 dark:text-white">
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    Previous
  </a>
  <a href="#" aria-current="page" class="relative z-10 inline-flex items-center px-4 py-2 text-sm font-medium text-indigo-600 bg-indigo-50 border border-indigo-500 rounded-md dark:bg-indigo-600 dark:text-white dark:border-indigo-700">
    1
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    2
  </a>
  <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    3
  </a>
  <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600">
    ...
  </span>
  <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    8
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    9
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    10
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
    Next
  </a>
</nav>

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

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

Composant de pagination

Un composant de pagination réactif, monochrome inspiré de la 3D pour les interfaces de médias sociaux, avec prise en charge du mode sombre, conçu avec Tailwind CSS.

Ouvrir