サイドバーコンポーネント 27
レスポンシブエフェクトとダークテーマのサポートを備えたレトロ/ビンテージスタイルのサイドバーコンポーネント。
HTMLコード
<div class="bg-gray-100 dark:bg-gray-800 h-screen w-64 shadow-lg p-5">
<div class="flex items-center mb-6">
<img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white ml-3">Hello, User!</h1>
</div>
<ul class="space-y-4">
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
<img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=1" alt="Icon">
<span class="text-gray-800 dark:text-white">Dashboard</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
<img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=2" alt="Icon">
<span class="text-gray-800 dark:text-white">Profile</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
<img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=3" alt="Icon">
<span class="text-gray-800 dark:text-white">Settings</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
<img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=4" alt="Icon">
<span class="text-gray-800 dark:text-white">Messages</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
<img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=5" alt="Icon">
<span class="text-gray-800 dark:text-white">Logout</span>
</a>
</li>
</ul>
</div>