ナビゲーション強化コンポーネント
Earth-Toneとダークモードをサポートするポートフォリオの作品や製品を紹介するために設計された、glassmorphismにインスパイアされたナビゲーションコンポーネントです。このコンポーネントは、すりガラス効果、レスポンシブデザイン、最小限の要素を備えています。
HTMLコード
<nav class="bg-white bg-opacity-30 dark:bg-gray-800 backdrop-blur-lg border-b border-gray-300 dark:border-gray-700 rounded-lg p-4 shadow-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">Portfolio</span>
</div>
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Home</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Gallery</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">About</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Contact</a></li>
</ul>
</div>
</nav>
<section class="p-8 bg-gray-50 dark:bg-gray-900">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">My Work</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white bg-opacity-30 dark:bg-gray-800 backdrop-blur-lg rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/400/300" alt="Project Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Project Title</h3>
<p class="text-gray-700 dark:text-gray-300">Brief description of the project goes here. Showcasing work effectively.</p>
</div>
</div>
<!-- Repeat similar divs for more projects -->
</div>
</section>関連コンポーネント
ナビゲーション強化コンポーネント
Tailwind CSS を使用してマテリアル デザイン スタイルで設計されたレスポンシブ ナビゲーション コンポーネントで、ダーク テーマのサポートとレスポンシブ エフェクトが特徴です。
ナビゲーション強化コンポーネント
レトロ/ビンテージの美学でスタイル化されたレスポンシブナビゲーションコンポーネントで、eコマースアプリケーションに適しており、ダークテーマのサポートと適度なインタラクティブ性を備えています。