ブルータリズムのナビゲーションバー
高彩度の色でブルータリズムスタイルでデザインされたレスポンシブナビゲーションバーで、ブログやコンテンツの消費用で、ダークテーマをサポートしています。
HTMLコード
<nav class="bg-green-600 dark:bg-green-900 p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">Home</a>
<a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">About</a>
<a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">Blog</a>
<a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">Contact</a>
</div>
<div class="hidden md:flex items-center space-x-4">
<a href="#" class="text-white bg-yellow-400 dark:bg-yellow-600 px-4 py-2 rounded-lg hover:bg-yellow-300 dark:hover:bg-yellow-500">Sign In</a>
<a href="#" class="text-white bg-red-500 dark:bg-red-700 px-4 py-2 rounded-lg hover:bg-red-400 dark:hover:bg-red-600">Get Started</a>
</div>
</div>
<div class="md:hidden mt-2">
<button class="text-white rounded-md p-2 hover:bg-yellow-300 dark:hover:bg-yellow-500">
Menu
</button>
</div>
</nav>
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-200 p-4">
<h1 class="text-3xl font-bold">Welcome to My Blog</h1>
<p class="mt-2">Discover amazing articles and content that inspire and educate.</p>
<img class="mt-4 rounded-lg" src="https://picsum.photos/800/400" alt="Random Image">
<div class="flex mt-4 space-x-4">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile Picture">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile Picture">
</div>
</div>関連コンポーネント
スキューモーフィックナビゲーションバー
スキューモーフィックなデザインスタイルを採用したソーシャルメディア用のシンプルなレスポンシブナビゲーションバーで、類似の配色を利用し、ダークモードをサポートしています。
ナビゲーションバーコンポーネント
eコマースWebサイト用のレスポンシブナビゲーションバーで、グレースケールの配色とTailwind CSSを使用したダークモードのサポートを備えたglassmorphismデザインスタイルが特徴です。