ナビゲーション強化コンポーネント
ブルータリズムの美学でデザインされたナビゲーションコンポーネントで、大胆なデザイン、ハイコントラスト、珍しいレイアウトが特徴です。レスポンシブエフェクトが含まれており、CSSでダークテーマをサポートしています。
HTMLコード
<nav class="bg-white dark:bg-gray-800 p-6">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Logo" class="h-10 w-10 rounded-full border-2 border-black dark:border-white">
<h1 class="text-2xl font-bold text-black dark:text-white">Brutal Nav</h1>
</div>
<ul class="flex space-x-6">
<li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
<a href="#home">Home</a>
</li>
<li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
<a href="#about">About</a>
</li>
<li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
<a href="#services">Services</a>
</li>
<li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<div class="bg-gray-300 dark:bg-gray-700 my-6">
<img src="https://picsum.photos/1200/300?random=1" alt="Banner" class="w-full h-auto">
</div>
<div class="container mx-auto py-6">
<h2 class="text-xl font-bold text-black dark:text-white">Featured</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
<div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg">
<img src="https://picsum.photos/300/200?random=1" alt="Placeholder" class="w-full h-40 object-cover rounded">
<h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 1</h3>
</div>
<div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg">
<img src="https://picsum.photos/300/200?random=2" alt="Placeholder" class="w-full h-40 object-cover rounded">
<h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 2</h3>
</div>
<div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg">
<img src="https://picsum.photos/300/200?random=3" alt="Placeholder" class="w-full h-40 object-cover rounded">
<h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 3</h3>
</div>
</div>
</div>
<footer class="bg-gray-200 dark:bg-gray-600 p-4 text-center">
<p class="text-sm text-black dark:text-white">© 2023 Brutalism Design. All Rights Reserved.</p>
</footer>
</nav>