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

페이지 매김 구성 요소

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

미리 보기

HTML 코드 

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

관련 구성 요소

페이지 매김 구성 요소

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

열다

Industrial_Vibrant_Pagination_Component

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

열다

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

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

열다