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

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

ブルータリズムスタイルでデザインされたレスポンシブページネーションコンポーネントで、アースカラーと適度な複雑さをビジネス/企業のWebサイトに利用し、ダークテーマをサポートしています。

プレビュー

HTMLコード 

<div class="flex justify-center items-center space-x-4 py-4">
    <button class="border-2 border-brown-600 text-brown-600 dark:border-brown-300 dark:text-brown-300 px-4 py-2 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        Previous
    </button>
    <span class="text-brown-600 dark:text-brown-300">Page 1 of 10</span>
    <button class="border-2 border-brown-600 text-brown-600 dark:border-brown-300 dark:text-brown-300 px-4 py-2 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        Next
    </button>
</div>

<div class="flex justify-center items-center space-x-2 py-4">
    <button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        1
    </button>
    <button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        2
    </button>
    <button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        3
    </button>
    <button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        4
    </button>
    <button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        5
    </button>
</div>

<div class="flex justify-center items-center space-x-4 py-4">
    <button class="border-2 border-brown-600 text-brown-600 dark:border-brown-300 dark:text-brown-300 px-4 py-2 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        Last
    </button>
</div>

関連コンポーネント

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

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

開ける

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

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

開ける

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

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

開ける