구성 요소 페이지 매김 Neumorphic Pagination 컴포넌트

Neumorphic Pagination 컴포넌트

블로그 인터페이스를 위한 Neumorphism으로 스타일링된 반응형 대화형 페이지 매김 구성 요소로, 다크 모드를 지원합니다.

미리 보기

HTML 코드

<div class="flex items-center justify-center py-8">  <nav aria-label="Pagination" class="hidden md:flex space-x-2">    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">Previous</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">1</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">2</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">3</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">Next</span>    </button>  </nav>  <nav aria-label="Pagination" class="flex md:hidden space-x-2">    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">Previous</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">Next</span>    </button>  </nav>  <div class="flex rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 mt-5 items-center space-x-2">    <span class="text-gray-800 dark:text-gray-200">Page</span>    <input type="number" class="w-12 text-center bg-transparent border-b border-gray-400 dark:border-gray-600 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500" value="1">    <span class="text-gray-800 dark:text-gray-200">of 3</span>  </div></div>

관련 구성 요소

페이지 매김 구성 요소

포트폴리오에 대한 미시적 상호작용이 있는 페이지 매김 구성 요소, 트라이어딕 색 구성표를 사용합니다. 어두운 테마를 지원하는 반응형 디자인, JavaScript 없음.

열다

페이지 매김 구성 요소

어두운 모드용으로 설계된 간단한 반응형 페이지 매김 구성 요소로, 유사한 색 구성표를 사용하여 포트폴리오에 적합합니다.

열다

페이지 매김 구성 요소

레트로/빈티지 디자인 스타일, 트라이어딕 색 구성표, 단순 복잡성, 블로그/콘텐츠 목적, Tailwind CSS 사용 페이지가 매겨진 구성 요소. 어두운 테마를 지원하는 반응형 디자인.

열다