検索コンポーネント

カテゴリ

ページネーション

コンテンツを複数のページに分割するナビゲーションシステム

Glassmorphism_Pagination_CRM

パステルカラーのシンプルでレスポンシブなglassmorphismスタイルのページネーションコンポーネントで、ダークモードのサポートを含む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>

OrganicPaginationコンポーネント

自然にインスパイアされたマーケットプレイス用のページネーションコンポーネントで、流れるようなライン、明るいアクセントの黒と白の美学、ダークモードのサポートによる完全な応答性が特徴です。

開けるプレビュー

                <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

レトロな配色を採用したシンプルなブルータリズムスタイルのページネーションコンポーネントで、ニュースやジャーナリズムの Web サイトに適しています。ハイコントラスト、大胆なタイポグラフィ、ダークモードのサポートが特徴です。

開けるプレビュー

                <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>

LuxuryPaginationコンポーネント

ドキュメントや 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>

アールデコ調のコーポレートページネーション

アールデコの美学に触発された洗練されたページネーションコンポーネントで、幾何学模様と企業の青の配色が特徴です。レスポンシブで、ダークモードのサポートが含まれており、プロのビジネスWebサイトに適しています。

開けるプレビュー

                <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>

音楽/オーディオのためのネオモーフィックネオンページネーション

ニューモルフィックスタイルと明るいネオン/エレクトリックカラーでデザインされたレスポンシブページネーションコンポーネントで、音楽ストリーミングやオーディオプラットフォームに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <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>