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

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

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

プレビュー

HTMLコード 

<div class="flex justify-center mt-6">
    <nav class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4">
        <ul class="flex items-center space-x-2">
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-blue-500 dark:hover:bg-blue-700 text-blue-600 dark:text-blue-300">Previous</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">1</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">2</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">3</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-red-500 dark:hover:bg-red-700 text-red-600 dark:text-red-300">Next</a>
            </li>
        </ul>
    </nav>
</div>
<div class="flex justify-center mt-8 space-x-6">
    <div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
        <img class="rounded-t-lg" src="https://picsum.photos/300/150?random=1" alt="Content Image" />
        <h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 1</h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
        <img class="rounded-t-lg" src="https://picsum.photos/300/150?random=2" alt="Content Image" />
        <h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 2</h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 text-center">Pellentesque habitant morbi tristique senectus.</p>
    </div>
    <div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
        <img class="rounded-t-lg" src="https://picsum.photos/300/150?random=3" alt="Content Image" />
        <h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 3</h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 text-center">Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
</div>

関連コンポーネント

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

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

開ける

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

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

開ける

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

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

開ける