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

페이지 매김 구성 요소

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

미리 보기

HTML 코드 

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

관련 구성 요소

Retro_Grayscale_Crypto_Pagination

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

열다

Skeuomorphic_Purple_Pagination

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

열다

Industrial_Vibrant_Pagination_Component

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

열다