Rechercher des composants

Catégories

Composants Pagination

Pagination

Système de navigation qui divise le contenu en plusieurs pages

Composant de pagination de neumorphisme

Composant de pagination Neumorphism pour le commerce électronique à l’aide de Tailwind CSS

                <nav class="flex items-center justify-between flex-column flex-wrap md:flex-row pt-4" aria-label="Table navigation">
    <span class="text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto">Showing <span class="font-semibold text-gray-900 dark:text-white">1-10</span> of <span class="font-semibold text-gray-900 dark:text-white">1000</span></span>
    <ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
        <li>
            <a href="#" class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                Previous
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">1</a>
        </li>
        <li>
            <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">2</a>
        </li>
        <li>
            <a href="#" aria-current="page" class="flex items-center justify-center px-3 h-8 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">3</a>
        </li>
        <li>
            <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:hover:bg-gray-700 dark:hover:text-white">4</a>
        </li>
        <li>
            <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">5</a>
        </li>
        <li>
            <a href="#" class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                Next
            </a>
        </li>
    </ul>
</nav>

Composant de pagination de neumorphisme

Un composant de pagination avec un design Neumorphism, une palette de couleurs pastel et une complexité modérée. Il est conçu pour les portfolios et inclut un design réactif et une prise en charge des thèmes sombres en utilisant uniquement HTML et Tailwind CSS.

Ouvrir Aperçu

                <nav aria-label="Pagination" class="flex items-center justify-center mt-8">
  <ul class="flex rounded-md shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <li>
      <a href="#" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-pastel-light rounded-l-lg hover:bg-pastel-dark hover:text-gray-700 dark:bg-pastel-dark dark:text-gray-400 dark:hover:bg-pastel-darker dark:hover:text-white">
        <span class="sr-only">Previous</span>
        <svg class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
      </a>
    </li>
    <li>
      <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-pastel-light hover:bg-pastel-dark hover:text-gray-700 dark:bg-pastel-dark dark:text-gray-400 dark:hover:bg-pastel-darker dark:hover:text-white">1</a>
    </li>
    <li>
      <a href="#" aria-current="page" class="z-10 px-3 py-2 leading-tight text-blue-600 bg-pastel-medium hover:bg-pastel-dark hover:text-blue-700 dark:bg-pastel-darker dark:text-white">
        2
      </a>
    </li>
    <li>
      <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-pastel-light hover:bg-pastel-dark hover:text-gray-700 dark:bg-pastel-dark dark:text-gray-400 dark:hover:bg-pastel-darker dark:hover:text-white">3</a>
    </li>
    <li>
      <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-pastel-light rounded-r-lg hover:bg-pastel-dark hover:text-gray-700 dark:bg-pastel-dark dark:text-gray-400 dark:hover:bg-pastel-darker dark:hover:text-white">
        <span class="sr-only">Next</span>
        <svg class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10L7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
      </a>
    </li>
  </ul>
</nav>

<style>
  /* Add your custom Neumorphism shadow styles here */
  .shadow-neumorphic-light {
    box-shadow: 5px 5px 10px #babecc, -5px -5px 10px #f2f2f2;
  }
  .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #333333;
  }
  /* Define your pastel color palette */
  .bg-pastel-light {
    background-color: #e0e0e0;
  }
  .bg-pastel-medium {
    background-color: #d5d5d5;
  }
  .bg-pastel-dark {
    background-color: #cccccc;
  }
   .bg-pastel-darker {
    background-color: #b0b0b0;
  }
</style>

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 Aperçu

                <div class="flex justify-center items-center space-x-4 py-4">
    <button class="border-2 border-brown-600 text-brown-600 dark:border-brown-300 dark:text-brown-300 px-4 py-2 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        Previous
    </button>
    <span class="text-brown-600 dark:text-brown-300">Page 1 of 10</span>
    <button class="border-2 border-brown-600 text-brown-600 dark:border-brown-300 dark:text-brown-300 px-4 py-2 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        Next
    </button>
</div>

<div class="flex justify-center items-center space-x-2 py-4">
    <button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        1
    </button>
    <button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        2
    </button>
    <button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        3
    </button>
    <button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        4
    </button>
    <button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        5
    </button>
</div>

<div class="flex justify-center items-center space-x-4 py-4">
    <button class="border-2 border-brown-600 text-brown-600 dark:border-brown-300 dark:text-brown-300 px-4 py-2 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        Last
    </button>
</div>

Composant de pagination neumorphe

Un composant de pagination réactif et interactif stylisé en Neumorphism pour une interface de blog, avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center py-8">  <nav aria-label="Pagination" class="hidden md:flex space-x-2">    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">Previous</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">1</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">2</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">3</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">Next</span>    </button>  </nav>  <nav aria-label="Pagination" class="flex md:hidden space-x-2">    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">Previous</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">Next</span>    </button>  </nav>  <div class="flex rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 mt-5 items-center space-x-2">    <span class="text-gray-800 dark:text-gray-200">Page</span>    <input type="number" class="w-12 text-center bg-transparent border-b border-gray-400 dark:border-gray-600 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500" value="1">    <span class="text-gray-800 dark:text-gray-200">of 3</span>  </div></div>

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.

Ouvrir Aperçu

                <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>

Composant de pagination

Un composant de pagination skeuomorphe conçu pour la consommation de contenu de blog avec la prise en charge des tons de terre et des thèmes sombres.

Ouvrir Aperçu

                <div class="flex justify-center items-center space-x-4 py-4">
    <button class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full px-4 py-2 shadow-lg hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300">
        Previous
    </button>
    <span class="text-gray-800 dark:text-gray-200">Page <strong>1</strong> of <strong>10</strong></span>
    <button class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full px-4 py-2 shadow-lg hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300">
        Next
    </button>
</div>
<div class="flex justify-center space-x-2 py-4">
    <button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
        1
    </button>
    <button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
        2
    </button>
    <button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
        3
    </button>
    <button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
        4
    </button>
    <button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
        5
    </button>
</div>
<div class="flex justify-center items-center space-x-4 py-4">
    <span class="text-gray-800 dark:text-gray-200">Jump to page:</span>
    <input type="number" min="1" max="10" class="w-12 px-2 py-1 border-2 border-gray-400 dark:border-gray-600 rounded bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition duration-300 focus:outline-none focus:border-gray-600 dark:focus:border-gray-400" />
</div>

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 Aperçu

                <div class="flex justify-center mt-6">
    <nav class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4">
        <ul class="flex items-center space-x-2">
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-blue-500 dark:hover:bg-blue-700 text-blue-600 dark:text-blue-300">Previous</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">1</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">2</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">3</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-red-500 dark:hover:bg-red-700 text-red-600 dark:text-red-300">Next</a>
            </li>
        </ul>
    </nav>
</div>
<div class="flex justify-center mt-8 space-x-6">
    <div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
        <img class="rounded-t-lg" src="https://picsum.photos/300/150?random=1" alt="Content Image" />
        <h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 1</h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
        <img class="rounded-t-lg" src="https://picsum.photos/300/150?random=2" alt="Content Image" />
        <h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 2</h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 text-center">Pellentesque habitant morbi tristique senectus.</p>
    </div>
    <div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
        <img class="rounded-t-lg" src="https://picsum.photos/300/150?random=3" alt="Content Image" />
        <h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 3</h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 text-center">Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
</div>

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.

Ouvrir Aperçu

                <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>

Composant de pagination neumorphe

Un composant de pagination neumorphique avec prise en charge du mode sombre.

Ouvrir Aperçu

                <nav aria-label="Page navigation example">
  <ul class="inline-flex -space-x-px text-base h-10">
    <li>
      <a href="#" class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
        <span class="sr-only">Previous</span>
        <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
        </svg>
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">1</a>
    </li>
    <li>
      <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">2</a>
    </li>
    <li>
      <a href="#" aria-current="page" class="flex items-center justify-center px-4 h-10 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">3</a>
    </li>
    <li>
      <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">4</a>
    </li>
    <li>
      <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">5</a>
    </li>
    <li>
      <a href="#" class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
        <span class="sr-only">Previous</span>
        <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
        </svg>
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
      <span class="sr-only">Next</span>
        <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
      </a>
    </li>
  </ul>
</nav>

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 Aperçu

                <nav aria-label="Pagination" class="flex items-center justify-between border-t border-gray-700 px-4 sm:px-0">
  <div class="-mt-px flex w-0 flex-1">
    <a href="#" class="inline-flex items-center border-t-2 border-transparent pr-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
      <svg class="mr-3 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M18 10a.75.75 0 01-.75.75H4.66l2.1 1.95a.75.75 0 11-1.02 1.1l-3.5-3.25a.75.75 0 010-1.1l3.5-3.25a.75.75 0 111.02 1.1l-2.1 1.95h12.59A.75.75 0 0118 10z" clip-rule="evenodd" />
      </svg>
      Previous
    </a>
  </div>
  <div class="hidden md:-mt-px md:flex">
    <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">1</a>
    <!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" -->
    <a href="#" class="inline-flex items-center border-t-2 border-indigo-500 px-4 pt-4 text-sm font-medium text-indigo-600 dark:text-indigo-400" aria-current="page">2</a>
    <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">3</a>
    <span class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 dark:text-gray-400">...</span>
    <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">8</a>
    <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">9</a>
    <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">10</a>
  </div>
  <div class="-mt-px flex w-0 flex-1 justify-end">
    <a href="#" class="inline-flex items-center border-t-2 border-transparent pl-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
      Next
      <svg class="ml-3 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd" />
      </svg>
    </a>
  </div>
</nav>