Rechercher des composants

Catégories

Composants Pagination

Pagination

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

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

                <nav class="flex flex-col sm:flex-row items-center justify-between p-4 bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 font-mono text-sm border-t-4 border-b-4 border-gray-900 dark:border-gray-100 shadow-inner dark:shadow-none">
  <div class="flex items-center space-x-4 mb-4 sm:mb-0">
    <span class="hidden sm:inline">Showing</span>
    <div class="relative">
      <select class="appearance-none bg-gray-200 dark:bg-gray-700 border border-gray-400 dark:border-gray-600 px-3 py-1 pr-8 rounded-none shadow-sm focus:outline-none focus:ring-1 focus:ring-gray-500 focus:border-gray-500 cursor-pointer text-gray-800 dark:text-gray-200">
        <option value="10">10</option>
        <option value="25">25</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </select>
      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
      </div>
    </div>
    <span>entries per page</span>
  </div>

  <div class="flex items-center space-x-2">
    <button class="px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-300 dark:bg-gray-800 text-gray-700 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-400 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-none font-bold shadow-sm">
      &lt;&lt; First
    </button>
    <button class="px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-300 dark:bg-gray-800 text-gray-700 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-400 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-none font-bold shadow-sm">
      &lt; Prev
    </button>

    <div class="flex space-x-1 sm:space-x-2">
      <button class="hidden sm:block px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-400 dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-bold rounded-none shadow-sm">1</button>
      <button class="px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-300 dark:bg-gray-800 text-gray-700 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-400 dark:hover:bg-gray-700 rounded-none shadow-sm">2</button>
      <span class="px-3 py-1 text-gray-700 dark:text-gray-300 hidden sm:block">...</span>
      <button class="px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-300 dark:bg-gray-800 text-gray-700 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-400 dark:hover:bg-gray-700 rounded-none shadow-sm">10</button>
      <button class="px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-300 dark:bg-gray-800 text-gray-700 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-400 dark:hover:bg-gray-700 rounded-none shadow-sm">11</button>
    </div>

    <button class="px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-300 dark:bg-gray-800 text-gray-700 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-400 dark:hover:bg-gray-700 rounded-none font-bold shadow-sm">
      Next &gt;
    </button>
    <button class="px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-300 dark:bg-gray-800 text-gray-700 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-400 dark:hover:bg-gray-700 rounded-none font-bold shadow-sm">
      Last &gt;&gt;
    </button>
  </div>

  <div class="mt-4 sm:mt-0 text-center">
    <span class="text-gray-700 dark:text-gray-300">Page <span class="font-bold">2</span> of <span class="font-bold">11</span></span>
  </div>
</nav>

Skeuomorphic_Purple_Pagination

Un composant de pagination complexe et skeuomorphe conçu pour les sites Web de conseil/services, avec une palette de couleurs violet/violet et une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <nav class="flex justify-center items-center py-8 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-purple-100 to-violet-200 dark:from-gray-900 dark:to-black rounded-xl shadow-xl border border-purple-300 dark:border-gray-700" aria-label="Pagination">
  <div class="flex flex-wrap gap-2 sm:gap-4 justify-center">
    <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 rounded-lg shadow-inner-lg shadow-purple-600/[.2] dark:shadow-purple-900/[.5] hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700" title="Previous Page">
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 010 1.06L9.06 10l3.73 3.71a.75.75 0 11-1.06 1.06l-4.25-4.25a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 0z" clip-rule="evenodd" />
      </svg>
      <span class="hidden sm:inline ml-2">Previous</span>
    </a>
    <div class="hidden sm:flex rounded-lg shadow-md border border-purple-400 dark:border-purple-700">
      <a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-white dark:text-gray-100 bg-gradient-to-br from-purple-600 to-purple-700 dark:from-purple-700 dark:to-purple-800 rounded-l-lg shadow-inner-lg shadow-purple-900/[.3] dark:shadow-purple-950/[.6] ring-2 ring-purple-500 dark:ring-purple-600 ring-offset-2 ring-offset-purple-200 dark:ring-offset-gray-900 transition-all duration-300 ease-in-out transform scale-105 border border-purple-700 dark:border-purple-800 focus:outline-none">
        1
      </a>
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 -ml-px hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700">
        2
      </a>
      <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 -ml-px hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700">
        3
      </a>
      <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-300 bg-gradient-to-br from-purple-200 to-purple-300 dark:from-purple-900 dark:to-gray-950 -ml-px" aria-disabled="true">
        ...
      </span>
      <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 -ml-px hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700">
        9
      </a>
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 -ml-px rounded-r-lg hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700">
        10
      </a>
    </div>
    <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 rounded-lg shadow-inner-lg shadow-purple-600/[.2] dark:shadow-purple-900/[.5] hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700" title="Next Page">
      <span class="hidden sm:inline mr-2">Next</span>
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 010-1.06L10.94 10 7.21 6.29a.75.75 0 111.06-1.06l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0z" clip-rule="evenodd" />
      </svg>
    </a>
  </div>
</nav>

Industrial_Vibrant_Pagination_Component

Un composant de pagination complexe, de style industriel, avec des couleurs vives, conçu pour les sites Web à but non lucratif/caritatifs. Présente l’esthétique des matériaux bruts, les éléments exposés, et offre une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

                <nav class="flex items-center justify-between px-4 py-3 bg-gray-100 border-t border-b border-gray-300 dark:bg-gray-900 dark:border-gray-700 sm:px-6" aria-label="Pagination">
  <div class="flex-1 flex justify-between sm:hidden">
    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors duration-200">
      <svg class="h-5 w-5 mr-2 stroke-current text-purple-600 dark:text-purple-400" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M15 19L8 12L15 5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      Previous
    </a>
    <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors duration-200">
      Next
      <svg class="h-5 w-5 ml-2 stroke-current text-purple-600 dark:text-purple-400" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M9 5L16 12L9 19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </a>
  </div>
  <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
    <div>
      <p class="text-sm text-gray-700 dark:text-gray-300">
        Showing
        <span class="font-medium text-emerald-600 dark:text-emerald-400">1</span>
        to
        <span class="font-medium text-emerald-600 dark:text-emerald-400">10</span>
        of
        <span class="font-medium text-emerald-600 dark:text-emerald-400">97</span>
        results
      </p>
    </div>
    <div>
      <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 transition-colors duration-200">
          <span class="sr-only">Previous</span>
          <svg class="h-5 w-5 stroke-current text-purple-600 dark:text-purple-400" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15 19L8 12L15 5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </a>
        <!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
        <a href="#" aria-current="page" class="z-10 relative inline-flex items-center px-4 py-2 border text-sm font-medium bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-lg dark:from-indigo-700 dark:to-purple-800 transform scale-105 transition-all duration-300">
          1
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200">
          2
        </a>
        <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200">
          3
        </a>
        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300">
          ...
        </span>
        <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200">
          9
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200">
          10
        </a>
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 transition-colors duration-200">
          <span class="sr-only">Next</span>
          <svg class="h-5 w-5 stroke-current text-purple-600 dark:text-purple-400" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 5L16 12L9 19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </a>
      </nav>
    </div>
  </div>
</nav>

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

                <nav class="flex justify-center items-center space-x-2 my-8 dark:bg-gray-900 bg-white p-4 rounded-lg shadow-lg" aria-label="Pagination">
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 leading-5 rounded-md hover:bg-purple-100 dark:hover:bg-purple-700 focus:outline-none focus:ring focus:border-purple-300 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300">
    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <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" />
    </svg>
  </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 leading-5 rounded-md hover:bg-green-100 dark:hover:bg-green-700 focus:outline-none focus:ring focus:border-green-300 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300">
    1
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-blue-600 leading-5 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition ease-in-out duration-150 dark:bg-blue-600 dark:border-blue-600 dark:text-gray-100 transform scale-105 shadow-md">
    2
  </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 leading-5 rounded-md hover:bg-red-100 dark:hover:bg-red-700 focus:outline-none focus:ring focus:border-red-300 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300">
    3
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 leading-5 rounded-md hover:bg-purple-100 dark:hover:bg-purple-700 focus:outline-none focus:ring focus:border-purple-300 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300">
    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
    </svg>
  </a>
</nav>

Composant de pagination

Un composant de pagination en mode sombre simple et élégant avec des couleurs pastel, adapté aux applications de médias sociaux. Il présente un design réactif et utilise Tailwind CSS pour le style, y compris la prise en charge du mode sombre.

Ouvrir Aperçu

                <nav class="flex items-center justify-between px-4 py-3 sm:px-6 bg-gray-900 rounded-md"> <div class="flex-1 flex justify-between sm:hidden"> <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-700 text-sm font-medium rounded-md text-gray-300 bg-gray-800 hover:bg-gray-700"> Previous </a> <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-700 text-sm font-medium rounded-md text-gray-300 bg-gray-800 hover:bg-gray-700"> Next </a> </div> <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> <div> <p class="text-sm text-gray-400"> Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">97</span> results </p> </div> <div> <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-700 bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700"> <span class="sr-only">Previous</span> <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> <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" /> </svg> </a> <a href="#" aria-current="page" class="z-10 bg-indigo-500 border-indigo-500 text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a> <a href="#" class="bg-gray-800 border-gray-700 text-gray-300 hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a> <a href="#" class="bg-gray-800 border-gray-700 text-gray-300 hover:bg-gray-700 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"> 3 </a> <span class="relative inline-flex items-center px-4 py-2 border border-gray-700 bg-gray-800 text-sm font-medium text-gray-400"> ... </span> <a href="#" class="bg-gray-800 border-gray-700 text-gray-300 hover:bg-gray-700 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"> 8 </a> <a href="#" class="bg-gray-800 border-gray-700 text-gray-300 hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 9 </a> <a href="#" class="bg-gray-800 border-gray-700 text-gray-300 hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 10 </a> <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-700 bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700"> <span class="sr-only">Next</span> <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /> </svg> </a> </nav> </div> </div> </nav>

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

                <nav aria-label="Pagination" class="flex justify-center items-center space-x-2 py-4 bg-gray-100 dark:bg-gray-900">
  <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-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
    Previous
  </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-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
    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-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
    2
  </a>
    <a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-indigo-600 bg-indigo-50 border border-indigo-500 rounded-md hover:bg-indigo-100 dark:bg-indigo-700 dark:border-indigo-600 dark:text-white dark:hover:bg-indigo-600 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
    3
  </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-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
    4
  </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-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
    Next
  </a>
</nav>

Composant de pagination

Un composant de pagination réactif simple conçu pour le mode sombre avec un schéma de couleurs analogue, adapté à un portfolio.

Ouvrir Aperçu

                <div class="flex justify-center items-center space-x-4 py-6">
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">&laquo; Previous</a>
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">1</a>
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">2</a>
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">3</a>
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">Next &raquo;</a>
</div>

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

                <nav aria-label="Pagination" class="flex justify-center items-center space-x-2 dark:bg-gray-800 p-4 rounded-md">
  <a href="#" class="px-3 py-2 bg-blue-600 text-white rounded-md dark:bg-blue-800 dark:text-gray-200 transform transition duration-300 ease-in-out hover:scale-110">Previous</a>
  <a href="#" class="px-3 py-2 bg-green-500 text-white rounded-md dark:bg-green-700 dark:text-gray-200 transform transition duration-300 ease-in-out hover:scale-110">1</a>
  <a href="#" aria-current="page" class="px-3 py-2 bg-red-600 text-white rounded-md dark:bg-red-800 dark:text-gray-200 transform transition duration-300 ease-in-out hover:scale-110">2</a>
  <a href="#" class="px-3 py-2 bg-green-500 text-white rounded-md dark:bg-green-700 dark:text-gray-200 transform transition duration-300 ease-in-out hover:scale-110">3</a>
  <a href="#" class="px-3 py-2 bg-blue-600 text-white rounded-md dark:bg-blue-800 dark:text-gray-200 transform transition duration-300 ease-in-out hover:scale-110">Next</a>
</nav>

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

                <div class="flex justify-center items-center space-x-4 py-8">
    <a href="#" class="px-4 py-2 text-white bg-yellow-400 dark:bg-yellow-600 rounded-lg font-bold uppercase tracking-wide hover:bg-yellow-500 dark:hover:bg-yellow-700">Prev</a>
    <span class="text-white dark:text-gray-300">Page 1 of 10</span>
    <a href="#" class="px-4 py-2 text-white bg-yellow-400 dark:bg-yellow-600 rounded-lg font-bold uppercase tracking-wide hover:bg-yellow-500 dark:hover:bg-yellow-700">Next</a>
</div>

<div class="flex justify-center items-center space-x-2">
    <a href="#" class="px-3 py-1 text-gray-800 bg-blue-300 dark:bg-blue-700 rounded-lg font-bold hover:bg-blue-400 dark:hover:bg-blue-800">1</a>
    <a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">2</a>
    <a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">3</a>
    <a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">4</a>
    <a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">5</a>
</div>

<div class="flex justify-center items-center space-x-4 mt-4">
    <a href="#" class="px-4 py-2 text-white bg-yellow-400 dark:bg-yellow-600 rounded-lg font-bold uppercase tracking-wide hover:bg-yellow-500 dark:hover:bg-yellow-700">Last</a>
</div>

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

Ouvrir Aperçu

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