Brutal Pagination 컴포넌트
소셜 미디어를 위한 단순하고 브루탈리즘 스타일의 페이지 매김 구성 요소는 파스텔 색상, 다크 모드 지원 및 응답성과 인터페이스합니다.
HTML 코드
<nav aria-label="Pagination" class="flex justify-between text-pastel-600 dark:text-pastel-400 font-mono text-lg">
<a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">Previous</a>
<div>
<a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1 transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">1</a>
<a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1 transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">2</a>
<a href="#" aria-current="page" class="bg-pastel-400 dark:bg-pastel-600 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1">3</a>
<a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1 transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">4</a>
<a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1 transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">5</a>
</div>
<a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">Next</a>
</nav>관련 구성 요소
페이지 매김 구성 요소
Brutalism 스타일로 설계된 반응형 페이지 매김 구성 요소로, 비즈니스/기업 웹 사이트에 대해 어스 톤과 적당한 복잡성을 활용하며 어두운 테마를 지원합니다.
Glassmorphism 페이지 매김 구성 요소
glassmorphism과 트라이어딕 색 구성표로 설계된 반응형 페이지 매김 구성 요소로, 블로그 및 콘텐츠 읽기에 적합합니다. 여러 대화형 요소를 특징으로 하며 다크 모드를 지원합니다.
페이지 매김 구성 요소
파스텔 색상의 단순하고 우아한 다크 모드 페이지 매김 구성 요소로 소셜 미디어 애플리케이션에 적합합니다. 반응형 디자인이 특징이며 다크 모드 지원을 포함하여 스타일링을 위해 Tailwind CSS를 사용합니다.