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

페이지 매김 구성 요소

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

미리 보기

HTML 코드 

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

관련 구성 요소

Gradient_Color_Transition_Pagination_Photography_Complex

사진 포트폴리오를 위해 설계된 복잡하고 반응이 빠른 페이지 매김 구성 요소로, 색상 그라디언트를 많이 사용하고 보색을 사용한 부드러운 전환이 특징입니다. 다크 모드 지원 및 대화형 요소가 포함됩니다.

열다

페이지 매김 구성 요소

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

열다

Industrial_Vibrant_Pagination_Component

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

열다