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_Pagination_CRM

パステルカラーのシンプルでレスポンシブなglassmorphismスタイルのページネーションコンポーネントで、ダークモードのサポートを含むCRM/ビジネスツールに適しています。

開ける

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

Tailwind CSSで構築された、ダークモードをサポートする、ソーシャルメディアインターフェイス用のレスポンシブで単色の3Dインスパイアされたページネーションコンポーネント。

開ける

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

ブルータリズムスタイルでデザインされたレスポンシブページネーションコンポーネントで、ビジネス/企業のWebサイトに適しており、トライアドカラースキームとダークモードのサポートが特徴です。

開ける