サイドバーコンポーネント
Tailwind CSSを使用して設計されたレスポンシブなダークモードサイドバーコンポーネントで、暗い背景、ホバー効果、画像やアバターのプレースホルダーが特徴です。
HTMLコード
<div class="flex flex-col h-screen bg-gray-800 text-white p-4">
<div class="flex items-center mb-6">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<h1 class="text-xl font-semibold">User Name</h1>
</div>
<nav class="flex-1">
<ul>
<li class="mb-4">
<a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/50/50" alt="Home Icon" class="w-6 h-6 mr-2">Home
</a>
</li>
<li class="mb-4">
<a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/50/50" alt="Profile Icon" class="w-6 h-6 mr-2">Profile
</a>
</li>
<li class="mb-4">
<a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/50/50" alt="Settings Icon" class="w-6 h-6 mr-2">Settings
</a>
</li>
<li class="mb-4">
<a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/50/50" alt="Logout Icon" class="w-6 h-6 mr-2">Logout
</a>
</li>
</ul>
</nav>
<footer>
<p class="text-gray-400 text-sm">© 2023 Your Company</p>
</footer>
</div>関連コンポーネント
Neumorphism サイドバーコンポーネント
Neumorphismデザイン、アースカラーの配色、シンプルな複雑さを備えたレスポンシブサイドバーコンポーネントで、ブログやコンテンツの消費に適しています。ダークモードのサポートが含まれています。