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

ページネーションコンポーネント

3D、トライアドカラー、シンプル、ビジネス/コーポレートスタイル、ダークモードをサポートするレスポンシブページネーションコンポーネント

プレビュー

HTMLコード 

<nav aria-label="Pagination" class="flex justify-center items-center space-x-2 dark:bg-gray-800 p-4 rounded-md">
  <a href="#" class="px-3 py-2 bg-blue-600 text-white rounded-md dark:bg-blue-800 dark:text-gray-200 transform transition duration-300 ease-in-out hover:scale-110">Previous</a>
  <a href="#" class="px-3 py-2 bg-green-500 text-white rounded-md dark:bg-green-700 dark:text-gray-200 transform transition duration-300 ease-in-out hover:scale-110">1</a>
  <a href="#" aria-current="page" class="px-3 py-2 bg-red-600 text-white rounded-md dark:bg-red-800 dark:text-gray-200 transform transition duration-300 ease-in-out hover:scale-110">2</a>
  <a href="#" class="px-3 py-2 bg-green-500 text-white rounded-md dark:bg-green-700 dark:text-gray-200 transform transition duration-300 ease-in-out hover:scale-110">3</a>
  <a href="#" class="px-3 py-2 bg-blue-600 text-white rounded-md dark:bg-blue-800 dark:text-gray-200 transform transition duration-300 ease-in-out hover:scale-110">Next</a>
</nav>

関連コンポーネント

Brutalist_Retro_Pagination

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

開ける

Glassmorphism ページネーション コンポーネント

glassmorphism とトライアドの配色で設計されたレスポンシブ ページネーション コンポーネントで、ブログやコンテンツの読み取りに適しています。複数のインタラクティブ要素を備えており、ダークモードをサポートしています。

開ける

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

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

開ける