サイドバーコンポーネント
レトロ/ビンテージスタイルでデザインされたレスポンシブサイドバーコンポーネントで、ダッシュボードレイアウトの鮮やかな色が特徴です。ダークモードのサポートが含まれています。
HTMLコード
<div class="flex flex-col w-64 h-screen p-4 bg-blue-600 text-white dark:bg-blue-900">
<h2 class="text-2xl font-bold mb-6 text-yellow-500">Dashboard</h2>
<div class="flex flex-col space-y-4">
<a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Home</a>
<a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Reports</a>
<a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Analytics</a>
<a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Settings</a>
</div>
<div class="mt-auto pt-4 border-t border-gray-300 dark:border-gray-700">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<span class="text-sm font-semibold">John Doe</span>
</div>
</div>
</div>関連コンポーネント
ダークモードのGlassmorphismサイドバー
glassmorphism デザインと Tailwind CSS を使用したダーク モードのサポートを備えたレスポンシブ サイドバー コンポーネント。これには、ロゴ、サイト名、ナビゲーションリンク、およびユーザープロファイルセクションが含まれます。
シンプルで活気に満ちたブログサイドバー
Tailwind CSSを使用して鮮やかな色とマテリアルのような感触でデザインされた、ブログコンテンツ用のシンプルでレスポンシブなサイドバーコンポーネント。ナビゲーションリンクとユーザープロファイルセクションが含まれています。Tailwind の dark: プレフィックスを使用したダーク モードをサポートします。大きな画面では固定され、小さな画面では非表示になります。