アールデコ調のコーポレートページネーション
アールデコの美学に触発された洗練されたページネーションコンポーネントで、幾何学模様と企業の青の配色が特徴です。レスポンシブで、ダークモードのサポートが含まれており、プロのビジネスWebサイトに適しています。
HTMLコード
<nav class="flex items-center justify-between px-4 py-3 sm:px-6 bg-gradient-to-r from-blue-900 to-blue-700 dark:from-gray-900 dark:to-gray-800 text-white shadow-lg font-sans rounded-lg border border-blue-600 dark:border-gray-700" aria-label="Pagination">
<div class="hidden sm:block">
<p class="text-sm text-blue-200 dark:text-gray-400">
Showing
<span class="font-medium">1</span>
to
<span class="font-medium">10</span>
of
<span class="font-medium">97</span>
results
</p>
</div>
<div class="flex flex-1 justify-between sm:justify-end">
<a href="#"
class="relative inline-flex items-center rounded-l-md border border-r-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out group">
<svg class="h-5 w-5 mr-2 text-blue-200 group-hover:text-blue-100 transition-colors duration-200 dark:text-gray-400 dark:group-hover:text-gray-300" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M12.79 5.23a.75.75 0 010 1.06L9.56 10l3.23 3.71a.75.75 0 11-1.06 1.06l-3.75-4.25a.75.75 0 010-1.06l3.75-4.25a.75.75 0 011.06 0z"
clip-rule="evenodd" />
</svg>
Previous
</a>
<div class="hidden sm:flex rounded-r-md border border-l-0 border-blue-500 dark:border-gray-600">
<a href="#"
class="relative inline-flex items-center border border-r-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
1
</a>
<a href="#"
class="relative inline-flex items-center bg-blue-500 dark:bg-gray-600 px-4 py-2 text-sm font-medium text-white dark:text-gray-100 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out border border-blue-500 dark:border-gray-600">
2
</a>
<a href="#"
class="relative hidden md:inline-flex items-center border border-r-0 border-l-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
3
</a>
<span
class="relative inline-flex items-center border border-r-0 border-l-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-200 dark:text-gray-400">
...
</span>
<a href="#"
class="relative hidden md:inline-flex items-center border border-r-0 border-l-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
8
</a>
<a href="#"
class="relative inline-flex items-center border border-r-0 border-l-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
9
</a>
<a href="#"
class="relative inline-flex items-center border border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
10
</a>
</div>
<a href="#"
class="relative inline-flex items-center rounded-r-md border border-l-0 border-r border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out group">
Next
<svg class="h-5 w-5 ml-2 text-blue-200 group-hover:text-blue-100 transition-colors duration-200 dark:text-gray-400 dark:group-hover:text-gray-300" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 010-1.06L10.44 10 7.21 6.29a.75.75 0 111.06-1.06l3.75 4.25a.75.75 0 010 1.06l-3.75 4.25a.75.75 0 01-1.06 0z"
clip-rule="evenodd" />
</svg>
</a>
</div>
</nav>関連コンポーネント
Brutalist_Retro_Pagination
レトロな配色を採用したシンプルなブルータリズムスタイルのページネーションコンポーネントで、ニュースやジャーナリズムの Web サイトに適しています。ハイコントラスト、大胆なタイポグラフィ、ダークモードのサポートが特徴です。
ページネーションコンポーネント
レトロ/ビンテージデザインスタイル、トライアドカラースキーム、シンプルな複雑さ、ブログ/コンテンツ目的、Tailwind CSSを使用したページネーションコンポーネント。ダークテーマをサポートするレスポンシブデザイン。