スキューモーフィック ナビゲーション コンポーネント
スキューモーフィックスタイルで設計されたナビゲーションコンポーネントで、補色の配色が特徴で、データの視覚化とコントロールパネルを備えたダッシュボードに適しています。これには、ユーザーエンゲージメントのためのインタラクティブな要素が含まれています。
HTMLコード
<nav class="bg-gray-800 dark:bg-gray-900 shadow-lg rounded-lg p-4 flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/50/50" alt="Logo" class="w-12 h-12 rounded-full mr-3 shadow-lg">
<h1 class="text-2xl font-bold text-white">Dashboard</h1>
</div>
<div class="mt-4 md:mt-0">
<ul class="flex space-x-4">
<li>
<a href="#" class="text-white hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Home</a>
</li>
<li>
<a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Profile</a>
</li>
<li>
<a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Settings</a>
</li>
<li>
<a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Logout</a>
</li>
</ul>
</div>
</nav>
<section class="p-6 bg-white dark:bg-gray-800 rounded-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard Overview</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
<h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 1</h3>
<img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
</div>
<div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
<h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 2</h3>
<img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
</div>
<div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
<h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 3</h3>
<img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
</div>
</div>
</section>関連コンポーネント
ナビゲーションコンポーネントコンポーネント
ダッシュボード用の複雑で応答性の高いナビゲーションコンポーネントで、マイクロインタラクションと類似の配色を特徴とし、ダークモードをサポートしています。スタイリングにTailwind CSSを利用し、JavaScriptに依存せずにインタラクティブな要素を含めます。
ナビゲーションコンポーネント
Microinteractionsで設計され、ユーザーアクションに基づく魅力的なアニメーションを特徴とするレスポンシブナビゲーションコンポーネントで、明るいテーマと暗いテーマの両方をサポートします。このコンポーネントには、プロファイル アバター、ナビゲーション リンク、ホバー効果が含まれます。