Search Components

Pagination

Navigation system that divides content into multiple pages

Retro_Grayscale_Crypto_Pagination

A complex, retro/vintage styled pagination component for cryptocurrency/blockchain applications, using a grayscale color scheme. It's fully responsive and supports dark mode.

Open Preview

                <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

A complex, skeuomorphic pagination component designed for consulting/services websites, featuring a purple/violet color scheme and full responsiveness with dark mode support.

Open Preview

                <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

A complex, industrial-style pagination component with vibrant colors, designed for non-profit/charity websites. Features raw materials aesthetics, exposed elements, and provides full responsiveness and dark mode support.

Open Preview

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

Pagination Component

Pagination component with microinteractions for a portfolio, using a triadic color scheme. Responsive design with dark theme support, no JavaScript.

Open Preview

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

Pagination Component

A simple and elegant dark mode pagination component with pastel colors, suitable for social media applications. It features a responsive design and uses Tailwind CSS for styling, including dark mode support.

Open Preview

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

Pagination Component

A responsive, monochromatic 3D-inspired pagination component for social media interfaces, with dark mode support, built with Tailwind CSS.

Open Preview

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

Pagination Component

A simple responsive pagination component designed for dark mode with an analogous color scheme, suitable for a portfolio.

Open Preview

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

Pagination Component

Responsive Pagination Component with 3D, Triadic Color, Simple, Business/Corporate Style, and Dark Mode Support

Open Preview

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

Pagination Component

A responsive pagination component designed in a brutalist style, suitable for business/corporate websites, featuring a triadic color scheme and dark mode support.

Open Preview

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

Brutal Pagination Component

A simple, brutalist-style pagination component for social media interfaces with pastel colors, dark mode support, and responsiveness.

Open Preview

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

Search Components

Categories

Pagination