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>

関連コンポーネント

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

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

開ける

Neumorphic Pagination コンポーネント

ブログインターフェイス用に Neumorphism でスタイル設定されたレスポンシブでインタラクティブなページネーションコンポーネントで、ダークモードをサポートしています。

開ける

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

レトロ/ビンテージデザインスタイル、トライアドカラースキーム、シンプルな複雑さ、ブログ/コンテンツ目的、Tailwind CSSを使用したページネーションコンポーネント。ダークテーマをサポートするレスポンシブデザイン。

開ける