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>관련 구성 요소
Brutalism 사이드바 탐색
Brutalism 디자인, 생생한 색 구성표 및 블로그/콘텐츠 목적을 위한 단순한 레이아웃을 갖춘 반응형 사이드바 탐색 구성 요소. 다크 모드 지원이 포함됩니다.
Sidebar Navigation 구성 요소
산업 디자인 스타일, 따뜻한 중성 색 구성표 및 다크 모드 지원을 갖춘 간단하고 반응이 빠른 사이드바 탐색 구성 요소로, 암호화폐/블록체인 애플리케이션에 적합합니다.