페이지 매김 구성 요소
비즈니스/기업 웹사이트에 적합한 브루탈리즘 스타일로 설계된 반응형 페이지 매김 구성 요소로, 트라이어딕 색 구성표와 다크 모드 지원을 특징으로 합니다.
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>관련 구성 요소
Brutal Pagination 컴포넌트
소셜 미디어를 위한 단순하고 브루탈리즘 스타일의 페이지 매김 구성 요소는 파스텔 색상, 다크 모드 지원 및 응답성과 인터페이스합니다.
음악/오디오를 위한 Neomorphic Neon Pagination
뉴모픽 스타일과 밝은 네온/일렉트릭 색상으로 설계된 반응형 페이지 매김 구성 요소로 음악 스트리밍 및 오디오 플랫폼에 적합합니다. 다크 모드 지원이 포함됩니다.
페이지 매김 구성 요소
소셜 미디어 인터페이스를 위한 반응형 단색 3D에서 영감을 받은 페이지 매김 구성 요소로, 다크 모드를 지원하며 Tailwind CSS로 제작되었습니다.