CCHub Logo CCHub Tailwind Collection
コンポーネント ページネーション Industrial_Vibrant_Pagination_Component

Industrial_Vibrant_Pagination_Component

非営利団体/慈善団体のWebサイト向けに設計された、鮮やかな色の複雑なインダストリアルスタイルのページネーションコンポーネント。原材料の美学、露出した要素が特徴で、完全な応答性とダークモードのサポートを提供します。

プレビュー

HTMLコード 

<nav class="flex items-center justify-between px-4 py-3 bg-gray-100 border-t border-b border-gray-300 dark:bg-gray-900 dark:border-gray-700 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-600 dark:text-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors duration-200">
      <svg class="h-5 w-5 mr-2 stroke-current text-purple-600 dark:text-purple-400" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M15 19L8 12L15 5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      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-600 dark:text-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors duration-200">
      Next
      <svg class="h-5 w-5 ml-2 stroke-current text-purple-600 dark:text-purple-400" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M9 5L16 12L9 19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </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 text-emerald-600 dark:text-emerald-400">1</span>
        to
        <span class="font-medium text-emerald-600 dark:text-emerald-400">10</span>
        of
        <span class="font-medium text-emerald-600 dark:text-emerald-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 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 transition-colors duration-200">
          <span class="sr-only">Previous</span>
          <svg class="h-5 w-5 stroke-current text-purple-600 dark:text-purple-400" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15 19L8 12L15 5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </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-br from-indigo-500 to-purple-600 text-white shadow-lg dark:from-indigo-700 dark:to-purple-800 transform scale-105 transition-all duration-300">
          1
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200">
          2
        </a>
        <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200">
          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-600 dark:bg-gray-800 dark:text-gray-300">
          ...
        </span>
        <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200">
          9
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200">
          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-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 transition-colors duration-200">
          <span class="sr-only">Next</span>
          <svg class="h-5 w-5 stroke-current text-purple-600 dark:text-purple-400" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 5L16 12L9 19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </a>
      </nav>
    </div>
  </div>
</nav>

関連コンポーネント

Neon_Glow_Pagination_Sports_Fitness

ネオン/グロー効果、トライアドカラースキームを備えたシンプルでレスポンシブなページネーションコンポーネントで、スポーツやフィットネスのアプリケーション向けに設計されており、ダークモードをサポートしています。

開ける

ニューモーフィズム ページネーション コンポーネント

Tailwind CSSを使用したEコマース用のNeumorphismページネーションコンポーネント

開ける

ニューモーフィズム ページネーション コンポーネント

ニューモーフィズム デザイン、パステル カラー スキーム、適度な複雑さを持つページネーション コンポーネント。ポートフォリオ用に設計されており、レスポンシブ デザインと、HTML と Tailwind CSS のみを使用したダーク テーマのサポートが含まれています。

開ける