페이지 매김 구성 요소
Brutalism 스타일로 설계된 반응형 페이지 매김 구성 요소로, 비즈니스/기업 웹 사이트에 대해 어스 톤과 적당한 복잡성을 활용하며 어두운 테마를 지원합니다.
HTML 코드
<div class="flex justify-center items-center space-x-4 py-4">
<button class="border-2 border-brown-600 text-brown-600 dark:border-brown-300 dark:text-brown-300 px-4 py-2 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
Previous
</button>
<span class="text-brown-600 dark:text-brown-300">Page 1 of 10</span>
<button class="border-2 border-brown-600 text-brown-600 dark:border-brown-300 dark:text-brown-300 px-4 py-2 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
Next
</button>
</div>
<div class="flex justify-center items-center space-x-2 py-4">
<button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
1
</button>
<button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
2
</button>
<button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
3
</button>
<button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
4
</button>
<button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
5
</button>
</div>
<div class="flex justify-center items-center space-x-4 py-4">
<button class="border-2 border-brown-600 text-brown-600 dark:border-brown-300 dark:text-brown-300 px-4 py-2 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
Last
</button>
</div>관련 구성 요소
페이지 매김 구성 요소
파스텔 색상의 단순하고 우아한 다크 모드 페이지 매김 구성 요소로 소셜 미디어 애플리케이션에 적합합니다. 반응형 디자인이 특징이며 다크 모드 지원을 포함하여 스타일링을 위해 Tailwind CSS를 사용합니다.
아르데코 코퍼레이트 페이지 매김
아르데코(Art Deco) 미학에서 영감을 받은 정교한 페이지 매김 구성 요소로, 기하학적 패턴과 기업 블루 색상 구성표가 특징입니다. 반응이 빠르고 다크 모드 지원이 포함되어 있으며 전문 비즈니스 웹사이트에 적합합니다.