CCHub Logo CCHub Tailwind Collection
구성 요소 페이지 매김 Brutal Pagination 컴포넌트

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>

관련 구성 요소

Neon_Glow_Pagination_Sports_Fitness

네온/글로우 효과, 트라이어드 색 구성표가 있는 간단하고 반응이 빠른 페이지 매김 구성 요소로, 스포츠 및 피트니스 애플리케이션용으로 설계되었으며 다크 모드를 지원합니다.

열다

전자상거래 페이지 매김

반응형 머티리얼 디자인(Material Design)은 전자 상거래 제품 목록에 적합한 어두운 테마를 지원하는 페이지 매김 구성 요소에서 영감을 받았습니다. HTML 및 Tailwind CSS만 사용하여 대화형 단추 상태로 보색 구성표와 적당한 복잡성을 구현합니다.

열다

Glassmorphism 페이지 매김 구성 요소

glassmorphism과 트라이어딕 색 구성표로 설계된 반응형 페이지 매김 구성 요소로, 블로그 및 콘텐츠 읽기에 적합합니다. 여러 대화형 요소를 특징으로 하며 다크 모드를 지원합니다.

열다