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

페이지 매김 구성 요소

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

미리 보기

HTML 코드 

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

관련 구성 요소

네온글로우페이지네이션

네온/글로우 효과가 있는 반응형 페이지 매김 구성 요소로, 암호화폐 및 블록체인 애플리케이션에 적합한 숲/녹색 색상 팔레트를 사용합니다. 다크 모드 지원 및 시맨틱 HTML이 특징입니다.

열다

페이지 매김 구성 요소

어스 톤과 어두운 테마를 지원하는 블로그 콘텐츠 소비를 위해 설계된 스큐어모픽 페이지 매김 구성 요소입니다.

열다

Glassmorphism_Pagination_CRM

파스텔 색상의 단순하고 반응이 빠른 유리 모피즘 스타일의 페이지 매김 구성 요소로, 다크 모드 지원을 포함하여 CRM/비즈니스 도구에 적합합니다.

열다