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>

関連コンポーネント

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

ポートフォリオのマイクロインタラクションを持つページネーションコンポーネントで、トライアドカラースキームを使用。ダークテーマをサポートし、JavaScriptを使用しないレスポンシブデザイン。

開ける

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

3D 要素でデザインされたレスポンシブ ページネーション コンポーネントで、Tailwind CSS を使用したダーク テーマのサポート。

開ける

Brutal Pagination コンポーネント

パステルカラー、ダークモードのサポート、応答性を備えたソーシャルメディアインターフェース用のシンプルなブルータリズムスタイルのページネーションコンポーネント。

開ける