CCHub Logo CCHub Tailwind Collection
구성 요소 페이지 매김 LuxuryPaginationComponent

LuxuryPaginationComponent

문서 또는 Wiki 사이트를 위해 설계된 우아하고 정교한 페이지 매김 구성 요소로, 고급스러움/프리미엄 느낌, 보색체 색 구성표 및 풍부한 대화형 요소를 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.

미리 보기

HTML 코드 

<nav class="flex items-center justify-between p-4 bg-white shadow-xl rounded-xl dark:bg-gray-800 lg:p-6" aria-label="Pagination">
  <div class="flex-1 flex justify-between items-center 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-700 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
      Previous
    </a>
    <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 ml-3 dark:border-gray-600 dark:text-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
      Next
    </a>
  </div>
  <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
    <div>
      <p class="text-sm text-gray-700 dark:text-gray-300">
        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>
      <ul class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
        <li>
          <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 focus:z-20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            <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>
        </li>
        <li>
          <a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium dark:bg-indigo-900 dark:border-indigo-700 dark:text-indigo-300 transition-colors duration-200 ease-in-out">
            1
          </a>
        </li>
        <li>
          <a href="#" class="bg-white border-gray-300 text-gray-700 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            2
          </a>
        </li>
        <li>
          <a href="#" class="hidden md:inline-flex bg-white border-gray-300 text-gray-700 hover:bg-gray-50 relative items-center px-4 py-2 border text-sm font-medium dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            3
          </a>
        </li>
        <li>
          <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-700 dark:text-gray-300">
            ...
          </span>
        </li>
        <li>
          <a href="#" class="hidden md:inline-flex bg-white border-gray-300 text-gray-700 hover:bg-gray-50 relative items-center px-4 py-2 border text-sm font-medium dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            8
          </a>
        </li>
        <li>
          <a href="#" class="bg-white border-gray-300 text-gray-700 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            9
          </a>
        </li>
        <li>
          <a href="#" class="bg-white border-gray-300 text-gray-700 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            10
          </a>
        </li>
        <li>
          <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 focus:z-20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            <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>
        </li>
      </ul>
    </div>
  </div>
</nav>

관련 구성 요소

페이지 매김 구성 요소

레트로/빈티지 디자인 스타일, 트라이어딕 색 구성표, 단순 복잡성, 블로그/콘텐츠 목적, Tailwind CSS 사용 페이지가 매겨진 구성 요소. 어두운 테마를 지원하는 반응형 디자인.

열다

페이지 매김 구성 요소

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

열다

아르데코 코퍼레이트 페이지 매김

아르데코(Art Deco) 미학에서 영감을 받은 정교한 페이지 매김 구성 요소로, 기하학적 패턴과 기업 블루 색상 구성표가 특징입니다. 반응이 빠르고 다크 모드 지원이 포함되어 있으며 전문 비즈니스 웹사이트에 적합합니다.

열다