Neumorphic Pagination コンポーネント
ブログインターフェイス用に Neumorphism でスタイル設定されたレスポンシブでインタラクティブなページネーションコンポーネントで、ダークモードをサポートしています。
HTMLコード
<div class="flex items-center justify-center py-8"> <nav aria-label="Pagination" class="hidden md:flex space-x-2"> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">Previous</span> </button> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">1</span> </button> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">2</span> </button> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">3</span> </button> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">Next</span> </button> </nav> <nav aria-label="Pagination" class="flex md:hidden space-x-2"> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">Previous</span> </button> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">Next</span> </button> </nav> <div class="flex rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 mt-5 items-center space-x-2"> <span class="text-gray-800 dark:text-gray-200">Page</span> <input type="number" class="w-12 text-center bg-transparent border-b border-gray-400 dark:border-gray-600 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500" value="1"> <span class="text-gray-800 dark:text-gray-200">of 3</span> </div></div>関連コンポーネント
ページネーションコンポーネント
パステルカラーのシンプルでエレガントなダークモードページネーションコンポーネントで、ソーシャルメディアアプリケーションに適しています。レスポンシブデザインが特徴で、ダークモードのサポートを含むスタイリングにTailwind CSSを使用しています。