검색 구성 요소

카테고리

구성 요소 페이지 매김

페이지 매김

콘텐츠를 여러 페이지로 나누는 탐색 시스템

Glassmorphism_Pagination_CRM

파스텔 색상의 단순하고 반응이 빠른 유리 모피즘 스타일의 페이지 매김 구성 요소로, 다크 모드 지원을 포함하여 CRM/비즈니스 도구에 적합합니다.

                <nav class="flex items-center justify-center p-4 bg-gradient-to-br from-purple-50 to-blue-50 dark:from-gray-800 dark:to-gray-900 min-h-[150px] sm:min-h-[200px] md:min-h-[250px] lg:min-h-[300px]">
  <ul class="flex items-center space-x-2 sm:space-x-4 bg-white/30 backdrop-blur-md rounded-xl p-3 sm:p-4 shadow-lg border border-white/20 dark:bg-gray-700/30 dark:border-gray-600/20">
    <li>
      <a href="#" class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out group">
        <svg class="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2 text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 transform group-hover:-translate-x-0.5 transition-transform" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
        </svg>
        Prev
      </a>
    </li>
    <li>
      <a href="#" class="relative hidden sm:inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out">
        1
      </a>
    </li>
    <li>
      <a href="#" aria-current="page" class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-purple-800 bg-purple-200/60 rounded-lg ring-1 ring-inset ring-purple-300 dark:text-purple-200 dark:bg-purple-700/60 dark:ring-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-all duration-200 ease-in-out">
        2
      </a>
    </li>
    <li>
      <a href="#" class="relative hidden sm:inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out">
        3
      </a>
    </li>
    <li>
      <span class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 dark:text-gray-200">
        ...
      </span>
    </li>
    <li>
      <a href="#" class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out">
        10
      </a>
    </li>
    <li>
      <a href="#" class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out group">
        Next
        <svg class="h-4 w-4 sm:h-5 sm:w-5 ml-1 sm:ml-2 text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 transform group-hover:translate-x-0.5 transition-transform" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
      </a>
    </li>
  </ul>
</nav>

네온글로우페이지네이션

네온/글로우 효과가 있는 반응형 페이지 매김 구성 요소로, 암호화폐 및 블록체인 애플리케이션에 적합한 숲/녹색 색상 팔레트를 사용합니다. 다크 모드 지원 및 시맨틱 HTML이 특징입니다.

열다 미리 보기

                <nav class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 font-sans" aria-label="Pagination">
  <ul class="flex list-none p-0 m-0">
    <li>
      <a href="#" class="relative inline-flex items-center justify-center px-3 py-2 mr-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
        hover:bg-gray-50 dark:hover:bg-gray-700
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
        transition-all duration-300 ease-in-out
        group
        overflow-hidden">
        <span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></span>
        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 010 1.06L9.56 10l3.23 3.71a.75.75 0 11-1.06 1.06l-3.75-3.75a.75.75 0 010-1.06l3.75-3.75a.75.75 0 011.06 0z" clip-rule="evenodd" />
        </svg>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li>
      <a href="#" aria-current="page" class="relative inline-flex items-center justify-center px-4 py-2 mx-1 text-sm font-semibold
        text-white bg-emerald-600 dark:bg-emerald-700 border border-emerald-600 dark:border-emerald-700 rounded-lg shadow-md
        ring-2 ring-emerald-500 ring-offset-1 ring-offset-transparent dark:ring-offset-transparent
        glow-emerald
        transition-all duration-300 ease-in-out
        overflow-hidden">
        <span class="absolute inset-0 bg-emerald-400 dark:bg-emerald-500 opacity-20 blur-md animate-pulse"></span>
        <span class="relative z-10">1</span>
      </a>
    </li>
    <li>
      <a href="#" class="relative inline-flex items-center justify-center px-4 py-2 mx-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
        hover:bg-gray-50 dark:hover:bg-gray-700
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
        transition-all duration-300 ease-in-out
        group
        overflow-hidden">
        <span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></span>
        <span class="relative z-10">2</span>
      </a>
    </li>
    <li class="hidden sm:block">
      <a href="#" class="relative inline-flex items-center justify-center px-4 py-2 mx-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
        hover:bg-gray-50 dark:hover:bg-gray-700
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
        transition-all duration-300 ease-in-out
        group
        overflow-hidden">
        <span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></span>
        <span class="relative z-10">3</span>
      </a>
    </li>
    <li class="hidden md:block">
      <span class="px-4 py-2 mx-1 text-sm font-medium text-gray-500Dark:text-gray-400">...</span>
    </li>
    <li class="hidden md:block">
      <a href="#" class="relative inline-flex items-center justify-center px-4 py-2 mx-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
        hover:bg-gray-50 dark:hover:bg-gray-700
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
        transition-all duration-300 ease-in-out
        group
        overflow-hidden">
        <span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></span>
        <span class="relative z-10">9</span>
      </a>
    </li>
    <li>
      <a href="#" class="relative inline-flex items-center justify-center px-4 py-2 mx-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
        hover:bg-gray-50 dark:hover:bg-gray-700
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
        transition-all duration-300 ease-in-out
        group
        overflow-hidden">
        <span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></span>
        <span class="relative z-10">10</span>
      </a>
    </li>
    <li>
      <a href="#" class="relative inline-flex items-center justify-center px-3 py-2 ml-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
        hover:bg-gray-50 dark:hover:bg-gray-700
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
        transition-all duration-300 ease-in-out
        group
        overflow-hidden">
        <span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></span>
        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 010-1.06L10.44 10 7.21 6.29a.75.75 0 111.06-1.06l3.75 3.75a.75.75 0 010 1.06l-3.75 3.75a.75.75 0 01-1.06 0z" clip-rule="evenodd" />
        </svg>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

<style>
  /* This is a simple pseudo-element glow. For a more advanced glow, consider using multiple box-shadows with different opacities and offsets, or SVG filters. */
  .glow-emerald {
    position: relative;
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.5), /* emerald-500 */
                0 0 10px rgba(16, 185, 129, 0.4),
                0 0 15px rgba(16, 185, 129, 0.3);
  }
  .dark .glow-emerald {
    box-shadow: 0 0 5px rgba(5, 150, 105, 0.6), /* emerald-600 */
                0 0 10px rgba(5, 150, 105, 0.5),
                0 0 15px rgba(5, 150, 105, 0.4);
  }

  @keyframes pulse {
    0%, 100% {
      opacity: 0.2;
    }
    50% {
      opacity: 0.4;
    }
  }

  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
</style>

오가닉 페이지네이션컴포넌트

마켓플레이스에서 사용할 수 있는 자연에서 영감을 받은 페이지 매김 구성 요소로, 흐르는 선, 밝은 액센트의 흑백 미학, 다크 모드 지원으로 완전한 응답성을 특징으로 합니다.

열다 미리 보기

                <nav class="flex items-center justify-between px-4 py-3 sm:px-6" aria-label="Pagination">
  <div class="flex-1 flex justify-between sm:hidden">
    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
      Previous
    </a>
    <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
      Next
    </a>
  </div>
  <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
    <div>
      <p class="text-sm text-gray-700 dark:text-gray-300">
        Showing
        <span class="font-medium">1</span>
        to
        <span class="font-medium">10</span>
        of
        <span class="font-medium">97</span>
        results
      </p>
    </div>
    <div>
      <nav class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
          <span class="sr-only">Previous</span>
          <!-- Heroicon name: solid/chevron-left -->
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
        <!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
        <a href="#" aria-current="page" class="z-10 bg-gradient-to-br from-indigo-500 to-purple-600 border-indigo-500 text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium transition-all duration-300 ease-in-out transform hover:scale-105">
          1
        </a>
        <a href="#" class="bg-white border-gray-300 text-gray-700 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
          2
        </a>
        <a href="#" class="bg-white border-gray-300 text-gray-700 hidden lg:inline-flex relative items-center px-4 py-2 border text-sm font-medium hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
          3
        </a>
        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
          ...
        </span>
        <a href="#" class="bg-white border-gray-300 text-gray-700 hidden lg:inline-flex relative items-center px-4 py-2 border text-sm font-medium hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
          9
        </a>
        <a href="#" class="bg-white border-gray-300 text-gray-700 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
          10
        </a>
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
          <span class="sr-only">Next</span>
          <!-- Heroicon name: solid/chevron-right -->
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
      </nav>
    </div>
  </div>
</nav>

Artistic_Sepia_Pagination_Component

세피아/갈색 톤의 복잡하고 예술적인 페이지 매김 구성 요소로, 수채화 텍스처에서 영감을 받아 CRM/비즈니스 도구에 적합합니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다 미리 보기

                <nav class="flex items-center justify-between px-4 sm:px-6 lg:px-8 py-3 bg-gradient-to-br from-amber-50 to-amber-100 dark:from-stone-900 dark:to-stone-950 rounded-2xl shadow-xl font-sans text-stone-800 dark:text-stone-300 relative overflow-hidden" aria-label="Pagination">
  
  <!-- Background texture overlay -->
  <div class="absolute inset-0 opacity-20 dark:opacity-10" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZmlsdGVyIGlkPSJlZmZlY3QiPgogICAgPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsdE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjA1IiBudW1PY3RhdmVzPSIxIiBzdGl0Y2hUYWlscz0icmFnd2VkIiBzdGl0Y2hUYWlscz0icmFnd2VkIiByZXN1bHQ9InR1cmJ1bGVuY2UiLz4KICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz4KICAgIDxmZUNvbXBvc2l0ZSBpbj0iU291cmNlQWxwaGEiIGluMj0idHVyYnVsZW5jZSIgb3BlcmF0b3I9ImluIiByZXN1bHQ9ImJsdXJlZF9ub2lzZSIvPgogICAgPGZlQmxlbmQgaW49IldhdGVybWFyayIgJmlubzI9ImJsdXJlZF9ub2lzZSIgbW9kZT0ibXVsdGlwbHkiLz4KICA8L2ZpbHRlcj4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJyZ2JhKDIxNywgMTk5LCAxNjgsIDAuMzUpIiBmaWx0ZXI9InVybCgjZWZmZWN0KSIgLz4KPC9zdmc+')"></div>

  <div class="flex-1 flex justify-between items-center">
    <!-- Previous Button -->
    <div class="w-auto md:w-1/3 order-1">
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-full border border-stone-300 dark:border-stone-700 bg-stone-200 hover:bg-stone-300 dark:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 ease-in-out text-stone-700 dark:text-stone-300 shadow-sm group">
        <svg class="h-5 w-5 mr-2 -ml-1 text-stone-600 dark:text-stone-400 group-hover:text-stone-800 dark:group-hover:text-stone-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 010 1.06L9.56 10l3.23 3.71a.75.75 0 11-1.06 1.06l-3.75-3.75a.75.75 0 010-1.06l3.75-3.75a.75.75 0 011.06 0z" clip-rule="evenodd" />
        </svg>
        <span class="hidden sm:inline">Previous</span>
        <span class="sm:hidden">Prev</span>
      </a>
    </div>

    <!-- Page Numbers (Desktop/Tablet) -->
    <div class="hidden md:flex justify-center flex-1 order-2 space-x-2">
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-full border border-transparent text-stone-600 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-200 ease-in-out">
        1
      </a>
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-full border border-transparent text-stone-600 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-200 ease-in-out">
        2
      </a>
      <a href="#" aria-current="page" class="relative z-10 inline-flex items-center px-4 py-2 text-sm font-semibold rounded-full border border-amber-400 dark:border-amber-600 bg-amber-300 dark:bg-amber-700 text-stone-900 dark:text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-amber-50">3</a>
      <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-stone-500 dark:text-stone-500 rounded-full">
        ...
      </span>
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-full border border-transparent text-stone-600 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-200 ease-in-out">
        10
      </a>
    </div>

    <!-- Page Status (Mobile) -->
    <div class="flex md:hidden flex-1 justify-center order-2 text-sm font-medium text-stone-700 dark:text-stone-300">
      Page <span class="font-semibold mx-1">3</span> of <span class="font-semibold mx-1">10</span>
    </div>

    <!-- Next Button -->
    <div class="w-auto md:w-1/3 order-3 flex justify-end">
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-full border border-stone-300 dark:border-stone-700 bg-stone-200 hover:bg-stone-300 dark:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 ease-in-out text-stone-700 dark:text-stone-300 shadow-sm group">
        <span class="hidden sm:inline">Next</span>
        <span class="sm:hidden">Next</span>
        <svg class="h-5 w-5 ml-2 -mr-1 text-stone-600 dark:text-stone-400 group-hover:text-stone-800 dark:group-hover:text-stone-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 010-1.06L10.44 10 7.21 6.29a.75.75 0 111.06-1.06l3.75 3.75a.75.75 0 010 1.06l-3.75 3.75a.75.75 0 01-1.06 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
  </div>

  <!-- Entries label (Desktop Only) -->
  <div class="absolute hidden lg:flex left-8 top-1/2 -translate-y-1/2 text-sm text-stone-600 dark:text-stone-400">
    <p class="mr-2">Showing</p>
    <p class="font-semibold text-stone-800 dark:text-stone-200 inline-block">1</p>
    <p class="mx-1">to</p>
    <p class="font-semibold text-stone-800 dark:text-stone-200 inline-block">10</p>
    <p class="ml-1">of</p>
    <p class="font-semibold text-stone-800 dark:text-stone-200 inline-block ml-1">97</p>
    <p class="ml-1">entries</p>
  </div>

  <!-- Dropdown for Results per Page (Desktop Only) -->
  <div class="absolute hidden lg:flex right-8 top-1/2 -translate-y-1/2 text-sm text-stone-600 dark:text-stone-400 items-center">
    <label for="results-per-page" class="mr-2">Results Per Page:</label>
    <select id="results-per-page" name="results-per-page" class="block w-auto py-1.5 pl-3 pr-8 rounded-full border border-stone-300 dark:border-stone-700 bg-stone-100 dark:bg-stone-800 text-stone-800 dark:text-stone-300 sm:text-sm shadow-sm focus:border-amber-500 focus:ring-amber-500 transition-colors duration-200 ease-in-out cursor-pointer">
      <option value="10" selected>10</option>
      <option value="25">25</option>
      <option value="50">50</option>
      <option value="100">100</option>
    </select>
  </div>

</nav>

Brutalist_Retro_Pagination

복고풍 색 구성표가 있는 단순하고 브루탈리즘 스타일의 페이지 매김 구성 요소로, 뉴스 및 저널리즘 웹사이트에 적합합니다. 고대비, 대담한 타이포그래피 및 다크 모드 지원이 특징입니다.

열다 미리 보기

                <nav class="flex items-center justify-between border-t-4 border-b-4 border-gray-900 bg-[#E0E0BA] dark:bg-gray-800 px-4 py-4 md:px-6 shadow-xl font-mono">
  <div class="flex-1 flex max-md:hidden">
    <a href="#" class="relative inline-flex items-center px-4 py-3 border-4 border-gray-900 bg-[#D4A5A5] dark:bg-gray-700 text-sm font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-widest hover:bg-[#A5D4D4] dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-[#E0E0BA] dark:focus:ring-offset-gray-800">
      <svg class="h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06-.02z" clip-rule="evenodd" />
      </svg>
      Previous
    </a>
  </div>
  <div class="flex justify-center flex-1 sm:justify-start">
    <div>
      <p class="text-sm text-gray-900 dark:text-gray-200 uppercase tracking-widest">
        Page <span class="font-bold">3</span> of <span class="font-bold">12</span>
      </p>
    </div>
  </div>
  <div class="flex-1 flex justify-end max-md:hidden">
    <a href="#" class="relative inline-flex items-center px-4 py-3 border-4 border-gray-900 bg-[#D4A5A5] dark:bg-gray-700 text-sm font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-widest hover:bg-[#A5D4D4] dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-[#E0E0BA] dark:focus:ring-offset-gray-800">
      Next
      <svg class="h-5 w-5 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
      </svg>
    </a>
  </div>

  <!-- Mobile Navigation -->
  <div class="flex flex-1 justify-between md:hidden">
    <a href="#" class="relative inline-flex items-center px-3 py-2 border-4 border-gray-900 bg-[#D4A5A5] dark:bg-gray-700 text-sm font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-widest hover:bg-[#A5D4D4] dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-[#E0E0BA] dark:focus:ring-offset-gray-800">
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06-.02z" clip-rule="evenodd" />
      </svg>
      <span class="sr-only">Previous</span>
    </a>
    <a href="#" class="ml-3 relative inline-flex items-center px-3 py-2 border-4 border-gray-900 bg-[#D4A5A5] dark:bg-gray-700 text-sm font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-widest hover:bg-[#A5D4D4] dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-[#E0E0BA] dark:focus:ring-offset-gray-800">
      <span class="sr-only">Next</span>
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
      </svg>
    </a>
  </div>
</nav>

LuxuryPaginationComponent

문서 또는 Wiki 사이트를 위해 설계된 우아하고 정교한 페이지 매김 구성 요소로, 고급스러움/프리미엄 느낌, 보색체 색 구성표 및 풍부한 대화형 요소를 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다 미리 보기

                <nav class="flex items-center justify-between p-4 bg-white shadow-xl rounded-xl dark:bg-gray-800 lg:p-6" aria-label="Pagination">
  <div class="flex-1 flex justify-between items-center sm:hidden">
    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
      Previous
    </a>
    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 ml-3 dark:border-gray-600 dark:text-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
      Next
    </a>
  </div>
  <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
    <div>
      <p class="text-sm text-gray-700 dark:text-gray-300">
        Showing
        <span class="font-medium">1</span>
        to
        <span class="font-medium">10</span>
        of
        <span class="font-medium">97</span>
        results
      </p>
    </div>
    <div>
      <ul class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
        <li>
          <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            <span class="sr-only">Previous</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </a>
        </li>
        <li>
          <a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium dark:bg-indigo-900 dark:border-indigo-700 dark:text-indigo-300 transition-colors duration-200 ease-in-out">
            1
          </a>
        </li>
        <li>
          <a href="#" class="bg-white border-gray-300 text-gray-700 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            2
          </a>
        </li>
        <li>
          <a href="#" class="hidden md:inline-flex bg-white border-gray-300 text-gray-700 hover:bg-gray-50 relative items-center px-4 py-2 border text-sm font-medium dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            3
          </a>
        </li>
        <li>
          <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
            ...
          </span>
        </li>
        <li>
          <a href="#" class="hidden md:inline-flex bg-white border-gray-300 text-gray-700 hover:bg-gray-50 relative items-center px-4 py-2 border text-sm font-medium dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            8
          </a>
        </li>
        <li>
          <a href="#" class="bg-white border-gray-300 text-gray-700 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            9
          </a>
        </li>
        <li>
          <a href="#" class="bg-white border-gray-300 text-gray-700 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            10
          </a>
        </li>
        <li>
          <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            <span class="sr-only">Next</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Neon_Glow_Pagination_Sports_Fitness

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

열다 미리 보기

                <nav class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 font-sans">
  <ul class="flex list-none p-0 m-0 rounded-lg shadow-lg dark:shadow-xl">
    <li>
      <a href="#" class="relative block px-4 py-2 text-fuchsia-500 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:text-fuchsia-400 dark:hover:bg-gray-600 rounded-l-lg transition-all duration-300 overflow-hidden group">
        <span class="relative z-10">&laquo; Previous</span>
        <span class="absolute inset-0 bg-fuchsia-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm"></span>
        <span class="absolute inset-0 border-2 border-fuchsia-500 rounded-l-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 scale-105 group-hover:scale-100"></span>
      </a>
    </li>
    <li>
      <a href="#" class="relative block px-4 py-2 text-emerald-500 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:text-emerald-400 dark:hover:bg-gray-600 transition-all duration-300 overflow-hidden group">
        <span class="relative z-10">1</span>
        <span class="absolute inset-0 bg-emerald-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm"></span>
        <span class="absolute inset-0 border-2 border-emerald-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 scale-105 group-hover:scale-100"></span>
      </a>
    </li>
    <li>
      <a href="#" aria-current="page" class="relative block px-4 py-2 text-cyan-500 bg-gray-300 dark:bg-gray-600 font-bold glow-effect-active transition-all duration-300 overflow-hidden group">
        <span class="relative z-10">2</span>
        <span class="absolute inset-0 bg-cyan-700 opacity-20 transition-opacity duration-300 blur-sm"></span>
        <span class="absolute inset-0 border-2 border-cyan-500 scale-105-outline-sm"></span>
      </a>
    </li>
    <li>
      <a href="#" class="relative block px-4 py-2 text-emerald-500 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:text-emerald-400 dark:hover:bg-gray-600 transition-all duration-300 overflow-hidden group">
        <span class="relative z-10">3</span>
        <span class="absolute inset-0 bg-emerald-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm"></span>
        <span class="absolute inset-0 border-2 border-emerald-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 scale-105 group-hover:scale-100"></span>
      </a>
    </li>
    <li class="sm:block hidden">
      <a href="#" class="relative block px-4 py-2 text-emerald-500 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:text-emerald-400 dark:hover:bg-gray-600 transition-all duration-300 overflow-hidden group">
        <span class="relative z-10">4</span>
        <span class="absolute inset-0 bg-emerald-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm"></span>
        <span class="absolute inset-0 border-2 border-emerald-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 scale-105 group-hover:scale-100"></span>
      </a>
    </li>
    <li>
      <a href="#" class="relative block px-4 py-2 text-fuchsia-500 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:text-fuchsia-400 dark:hover:bg-gray-600 rounded-r-lg transition-all duration-300 overflow-hidden group">
        <span class="relative z-10">Next &raquo;</span>
        <span class="absolute inset-0 bg-fuchsia-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm"></span>
        <span class="absolute inset-0 border-2 border-fuchsia-500 rounded-r-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 scale-105 group-hover:scale-100"></span>
      </a>
    </li>
  </ul>
</nav>

<style>
  /* Custom CSS for the glowing active state and outline effect */
  .glow-effect-active {
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.7), 0 0 16px rgba(6, 182, 212, 0.5), 0 0 24px rgba(6, 182, 212, 0.3);
    transform: scale(1.05);
    position: relative;
    z-index: 20;
  }

  .dark .glow-effect-active {
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.7), 0 0 16px rgba(34, 211, 238, 0.5), 0 0 24px rgba(34, 211, 238, 0.3);
  }

  /* Outline effect for hover */
  .group:hover .scale-105, .group:hover .scale-105-outline-sm {
    transform: scale(1.05);
  }

   .scale-105-outline-sm {
    position: absolute;
    inset: 0;
    border: 2px solid theme('colors.cyan.500'); /* Use Tailwind config for consistency */
    border-radius: inherit; /* Inherit border-radius from parent if applies */
    opacity: 1;
    filter: drop-shadow(0 0 4px theme('colors.cyan.500'));
    transition: transform 0.3s ease, border-color 0.3s ease, filter 0.3s ease;
  }

  .dark .scale-105-outline-sm {
    border-color: theme('colors.cyan.400');
    filter: drop-shadow(0 0 4px theme('colors.cyan.400'));
  }

  /* Small adjustment for responsiveness on smaller screens */
  @media (max-width: 640px) {
    .glow-effect-active {
      transform: scale(1.03);
    }
    .group:hover .scale-105, .group:hover .scale-105-outline-sm {
      transform: scale(1.03);
    }
  }
</style>

아르데코 코퍼레이트 페이지 매김

아르데코(Art Deco) 미학에서 영감을 받은 정교한 페이지 매김 구성 요소로, 기하학적 패턴과 기업 블루 색상 구성표가 특징입니다. 반응이 빠르고 다크 모드 지원이 포함되어 있으며 전문 비즈니스 웹사이트에 적합합니다.

열다 미리 보기

                <nav class="flex items-center justify-between px-4 py-3 sm:px-6 bg-gradient-to-r from-blue-900 to-blue-700 dark:from-gray-900 dark:to-gray-800 text-white shadow-lg font-sans rounded-lg border border-blue-600 dark:border-gray-700" aria-label="Pagination">
  <div class="hidden sm:block">
    <p class="text-sm text-blue-200 dark:text-gray-400">
      Showing
      <span class="font-medium">1</span>
      to
      <span class="font-medium">10</span>
      of
      <span class="font-medium">97</span>
      results
    </p>
  </div>
  <div class="flex flex-1 justify-between sm:justify-end">
    <a href="#"
      class="relative inline-flex items-center rounded-l-md border border-r-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out group">
      <svg class="h-5 w-5 mr-2 text-blue-200 group-hover:text-blue-100 transition-colors duration-200 dark:text-gray-400 dark:group-hover:text-gray-300" xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd"
          d="M12.79 5.23a.75.75 0 010 1.06L9.56 10l3.23 3.71a.75.75 0 11-1.06 1.06l-3.75-4.25a.75.75 0 010-1.06l3.75-4.25a.75.75 0 011.06 0z"
          clip-rule="evenodd" />
      </svg>
      Previous
    </a>
    <div class="hidden sm:flex rounded-r-md border border-l-0 border-blue-500 dark:border-gray-600">
      <a href="#"
        class="relative inline-flex items-center border border-r-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
        1
      </a>
      <a href="#"
        class="relative inline-flex items-center bg-blue-500 dark:bg-gray-600 px-4 py-2 text-sm font-medium text-white dark:text-gray-100 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out border border-blue-500 dark:border-gray-600">
        2
      </a>
      <a href="#"
        class="relative hidden md:inline-flex items-center border border-r-0 border-l-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
        3
      </a>
      <span
        class="relative inline-flex items-center border border-r-0 border-l-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-200 dark:text-gray-400">
        ...
      </span>
      <a href="#"
        class="relative hidden md:inline-flex items-center border border-r-0 border-l-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
        8
      </a>
      <a href="#"
        class="relative inline-flex items-center border border-r-0 border-l-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
        9
      </a>
      <a href="#"
        class="relative inline-flex items-center border border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
        10
      </a>
    </div>
    <a href="#"
      class="relative inline-flex items-center rounded-r-md border border-l-0 border-r border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out group">
      Next
      <svg class="h-5 w-5 ml-2 text-blue-200 group-hover:text-blue-100 transition-colors duration-200 dark:text-gray-400 dark:group-hover:text-gray-300" xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd"
          d="M7.21 14.77a.75.75 0 010-1.06L10.44 10 7.21 6.29a.75.75 0 111.06-1.06l3.75 4.25a.75.75 0 010 1.06l-3.75 4.25a.75.75 0 01-1.06 0z"
          clip-rule="evenodd" />
      </svg>
    </a>
  </div>
</nav>

Gradient_Color_Transition_Pagination_Photography_Complex

사진 포트폴리오를 위해 설계된 복잡하고 반응이 빠른 페이지 매김 구성 요소로, 색상 그라디언트를 많이 사용하고 보색을 사용한 부드러운 전환이 특징입니다. 다크 모드 지원 및 대화형 요소가 포함됩니다.

열다 미리 보기

                <nav class="flex items-center justify-between px-4 py-3 sm:px-6 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 shadow-lg rounded-xl max-w-4xl mx-auto my-8 overflow-hidden" aria-label="Pagination">
  <div class="flex-1 flex justify-between sm:hidden">
    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white dark:text-gray-200 bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-700 dark:to-indigo-700 hover:from-purple-700 hover:to-indigo-700 dark:hover:from-purple-800 dark:hover:to-indigo-800 transition-all duration-300 ease-in-out shadow-md hover:shadow-lg">
      Previous
    </a>
    <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white dark:text-gray-200 bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-700 dark:to-indigo-700 hover:from-purple-700 hover:to-indigo-700 dark:hover:from-purple-800 dark:hover:to-indigo-800 transition-all duration-300 ease-in-out shadow-md hover:shadow-lg">
      Next
    </a>
  </div>
  <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
    <div>
      <p class="text-sm text-gray-700 dark:text-gray-300 group">
        Showing
        <span class="font-medium bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-orange-500 dark:from-pink-400 dark:to-orange-400">1</span>
        to
        <span class="font-medium bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-orange-500 dark:from-pink-400 dark:to-orange-400">10</span>
        of
        <span class="font-medium bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-orange-500 dark:from-pink-400 dark:to-orange-400">97</span>
        results
      </p>
    </div>
    <div>
      <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <span class="sr-only">Previous</span>
          <svg class="h-5 w-5 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
        <!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
        <a href="#" aria-current="page" class="z-10 relative inline-flex items-center px-4 py-2 border text-sm font-medium bg-gradient-to-r from-blue-500 to-green-500 text-white dark:from-blue-600 dark:to-green-600 dark:text-gray-100 border-blue-500 dark:border-blue-600 shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105">
          1
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 transform hover:scale-105 hover:from-purple-400 hover:to-pink-400 group">
          <span class="group-hover:bg-clip-text group-hover:text-transparent group-hover:bg-gradient-to-r from-purple-500 to-red-500">2</span>
        </a>
        <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 transform hover:scale-105 hover:from-purple-400 hover:to-pink-400 group">
          <span class="group-hover:bg-clip-text group-hover:text-transparent group-hover:bg-gradient-to-r from-purple-500 to-red-500">3</span>
        </a>
        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 select-none">
          ...
        </span>
        <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 transform hover:scale-105 group">
          <span class="group-hover:bg-clip-text group-hover:text-transparent group-hover:bg-gradient-to-r from-purple-500 to-red-500">9</span>
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 transform hover:scale-105 group">
          <span class="group-hover:bg-clip-text group-hover:text-transparent group-hover:bg-gradient-to-r from-purple-500 to-red-500">10</span>
        </a>
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <span class="sr-only">Next</span>
          <svg class="h-5 w-5 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
      </nav>
    </div>
  </div>
</nav>

음악/오디오를 위한 Neomorphic Neon Pagination

뉴모픽 스타일과 밝은 네온/일렉트릭 색상으로 설계된 반응형 페이지 매김 구성 요소로 음악 스트리밍 및 오디오 플랫폼에 적합합니다. 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-black p-4">
  <nav class="flex items-center justify-center space-x-2 p-3 rounded-xl shadow-lg border border-gray-200 dark:border-gray-800
    bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900
    dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.6),inset_-2px_-2px_5px_rgba(30,30,30,0.6),5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(50,50,50,0.3)]
    shadow-[inset_2px_2px_5px_rgba(255,255,255,0.7),inset_-2px_-2px_5px_rgba(180,180,180,0.7),5px_5px_10px_rgba(0,0,0,0.1),-5px_-5px_10px_rgba(255,255,255,0.8)]
    max-w-xs sm:max-w-md md:max-w-lg lg:max-w-xl duration-300 ease-in-out">

    <!-- Previous Button -->
    <a href="#" class="neumorphic-button group">
      <svg class="h-5 w-5 text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 transition-colors duration-200"
        fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
      </svg>
      <span class="sr-only">Previous</span>
    </a>

    <!-- Page Numbers / Current Page -->
    <div class="flex space-x-2 sm:space-x-1 md:space-x-2">
      <a href="#" class="neumorphic-button hidden sm:flex group">
        <span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">1</span>
      </a>
      <a href="#" class="neumorphic-button hidden sm:flex group">
        <span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">2</span>
      </a>
      <span class="relative inline-flex items-center px-3 py-1.5 sm:px-4 sm:py-2 text-sm font-semibold
        rounded-lg neumorphic-active
        text-fuchsia-600 dark:text-cyan-500
        shadow-lg dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.6),inset_-2px_-2px_5px_rgba(30,30,30,0.6)]
        shadow-[inset_2px_2px_5px_rgba(255,255,255,0.7),inset_-2px_-2px_5px_rgba(180,180,180,0.7)] 
        border border-fuchsia-400 dark:border-cyan-600
        
        ">
        3
        <span class="absolute inset-0 rounded-lg opacity-40 blur-sm 
          bg-gradient-to-br from-fuchsia-400 to-fuchsia-600 
          dark:from-cyan-400 dark:to-cyan-600"></span>
      </span>
      <a href="#" class="neumorphic-button hidden sm:flex group">
        <span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">4</span>
      </a>
      <a href="#" class="neumorphic-button hidden md:flex group">
        <span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">5</span>
      </a>
      <span class="text-fuchsia-500 dark:text-cyan-400 self-center hidden md:block">...</span>
      <a href="#" class="neumorphic-button hidden md:flex group">
        <span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">10</span>
      </a>
    </div>

    <!-- Next Button -->
    <a href="#" class="neumorphic-button group">
      <svg class="h-5 w-5 text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 transition-colors duration-200"
        fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
      </svg>
      <span class="sr-only">Next</span>
    </a>
  </nav>

  <style>
    /* Base styles for the neumorphic button */
    .neumorphic-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.625rem 0.8rem; /* Equivalent to px-3 py-1.5, slightly tweaked for visual balance */
      font-size: 0.875rem; /* text-sm */
      font-weight: 500; /* font-medium */
      border-radius: 0.5rem; /* rounded-lg */
      color: #9240F0; /* Default text color, will be overridden by specific color classes */
      transition: all 0.2s ease-in-out;
      cursor: pointer;
      user-select: none;
      position: relative;
      overflow: hidden;

      /* Neumorphic default shadow (light mode) */
      background: linear-gradient(145deg, #e0e0e0, #f0f0f0);
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1), 
                  -2px -2px 5px rgba(255, 255, 255, 0.8), 
                  inset 1px 1px 2px rgba(255, 255, 255, 0.7),
                  inset -1px -1px 2px rgba(180, 180, 180, 0.7);
      border: 1px solid transparent; /* Subtle border for definition */
    }

    /* Neumorphic active/pressed state */
    .neumorphic-button:active,
    .neumorphic-button.neumorphic-active {
      background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
      box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2),
                inset -3px -3px 6px rgba(255, 255, 255, 0.7);
      border-color: #fca0e5; /* Hot Pink */
    }

    /* Neumorphic hover state (light mode) */
    .neumorphic-button:hover {
      background: linear-gradient(145deg, #f5f5f5, #e5e5e5);
      box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15),
                  -3px -3px 6px rgba(255, 255, 255, 0.9),
                  inset 1px 1px 2px rgba(255, 255, 255, 0.8),
                  inset -1px -1px 2px rgba(190, 190, 190, 0.8);
    }

    /* Dark mode for neumorphic button */
    .dark .neumorphic-button {
      background: linear-gradient(145deg, #2b2b2b, #1a1a1a);
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6),
                  -2px -2px 5px rgba(30, 30, 30, 0.6),
                  inset 1px 1px 2px rgba(30, 30, 30, 0.7),
                  inset -1px -1px 2px rgba(0, 0, 0, 0.7);
      border: 1px solid transparent; /* Subtle border for definition */
    }

    .dark .neumorphic-button:active,
    .dark .neumorphic-button.neumorphic-active {
      background: linear-gradient(145deg, #1a1a1a, #2b2b2b);
      box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.8),
                  inset -3px -3px 6px rgba(40, 40, 40, 0.8);
      border-color: #00BCD4; /* Electric Blue */
    }

    .dark .neumorphic-button:hover {
      background: linear-gradient(145deg, #1f1f1f, #2f2f2f);
      box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8),
                  -3px -3px 6px rgba(40, 40, 40, 0.8),
                  inset 1px 1px 2px rgba(40, 40, 40, 0.8),
                  inset -1px -1px 2px rgba(0, 0, 0, 0.8);
    }

  </style>
</div>