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

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

ダークモード用に設計されたシンプルなレスポンシブページネーションコンポーネントで、類似のカラースキームで、ポートフォリオに適しています。

プレビュー

HTMLコード 

<div class="flex justify-center items-center space-x-4 py-6">
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">&laquo; Previous</a>
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">1</a>
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">2</a>
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">3</a>
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">Next &raquo;</a>
</div>

関連コンポーネント

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

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

開ける

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

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

開ける

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

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

開ける