검색 구성 요소

카테고리

구성 요소 페이지 매김

페이지 매김

콘텐츠를 여러 페이지로 나누는 탐색 시스템

Retro_Grayscale_Crypto_Pagination

암호화폐/블록체인 애플리케이션을 위한 복잡한 레트로/빈티지 스타일의 페이지 매김 구성 요소로, 그레이스케일 색 구성표를 사용합니다. 완벽하게 반응하며 다크 모드를 지원합니다.

                <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

컨설팅/서비스 웹 사이트를 위해 설계된 복잡한 스큐어모픽 페이지 매김 구성 요소로, 자주색/보라색 색 구성표와 다크 모드 지원으로 완전한 응답성을 제공합니다.

열다 미리 보기

                <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

생생한 색상의 복잡한 산업 스타일 페이지 매김 구성 요소로, 비영리/자선 웹 사이트를 위해 설계되었습니다. 원료의 미학, 노출된 요소를 특징으로 하며 완전한 반응성과 다크 모드 지원을 제공합니다.

열다 미리 보기

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

페이지 매김 구성 요소

포트폴리오에 대한 미시적 상호작용이 있는 페이지 매김 구성 요소, 트라이어딕 색 구성표를 사용합니다. 어두운 테마를 지원하는 반응형 디자인, JavaScript 없음.

열다 미리 보기

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

페이지 매김 구성 요소

파스텔 색상의 단순하고 우아한 다크 모드 페이지 매김 구성 요소로 소셜 미디어 애플리케이션에 적합합니다. 반응형 디자인이 특징이며 다크 모드 지원을 포함하여 스타일링을 위해 Tailwind CSS를 사용합니다.

열다 미리 보기

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

페이지 매김 구성 요소

소셜 미디어 인터페이스를 위한 반응형 단색 3D에서 영감을 받은 페이지 매김 구성 요소로, 다크 모드를 지원하며 Tailwind CSS로 제작되었습니다.

열다 미리 보기

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

페이지 매김 구성 요소

어두운 모드용으로 설계된 간단한 반응형 페이지 매김 구성 요소로, 유사한 색 구성표를 사용하여 포트폴리오에 적합합니다.

열다 미리 보기

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

페이지 매김 구성 요소

3D, 트라이어드 컬러, 심플, 비즈니스/코퍼레이트 스타일 및 다크 모드를 지원하는 반응형 페이지 매김 컴포넌트

열다 미리 보기

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

페이지 매김 구성 요소

비즈니스/기업 웹사이트에 적합한 브루탈리즘 스타일로 설계된 반응형 페이지 매김 구성 요소로, 트라이어딕 색 구성표와 다크 모드 지원을 특징으로 합니다.

열다 미리 보기

                <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 컴포넌트

소셜 미디어를 위한 단순하고 브루탈리즘 스타일의 페이지 매김 구성 요소는 파스텔 색상, 다크 모드 지원 및 응답성과 인터페이스합니다.

열다 미리 보기

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