Sidebar Navigation 구성 요소
블로그에 맞게 조정된 사이드바 탐색 구성 요소로, 3D 요소와 생생한 색상으로 디자인되었습니다. 다크 모드를 지원하고 반응형이며 콘텐츠 소비에 적합한 간단한 레이아웃을 특징으로 합니다.
HTML 코드
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 h-screen sticky top-0">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Navigation</h2>
<ul class="space-y-4">
<li>
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150">
<img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
<span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Home</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150">
<img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
<span class="ml-2 font-medium text-gray-700 dark:text-gray-300">About</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150">
<img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
<span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Blog</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150">
<img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
<span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Contact</span>
</a>
</li>
</ul>
</div>