Brutalism 사이드바 탐색
Brutalism 디자인, 생생한 색 구성표 및 블로그/콘텐츠 목적을 위한 단순한 레이아웃을 갖춘 반응형 사이드바 탐색 구성 요소. 다크 모드 지원이 포함됩니다.
HTML 코드
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Sidebar -->
<div class="w-64 px-4 py-6 bg-yellow-400 dark:bg-yellow-700 border-r-4 border-black dark:border-white">
<h2 class="text-2xl font-bold text-black dark:text-white">Navigation</h2>
<nav class="mt-8">
<ul>
<li class="mb-4">
<a href="#" class="block text-black dark:text-white hover:underline text-xl">Home</a>
</li>
<li class="mb-4">
<a href="#" class="block text-black dark:text-white hover:underline text-xl">Articles</a>
</li>
<li class="mb-4">
<a href="#" class="block text-black dark:text-white hover:underline text-xl">About</a>
</li>
<li class="mb-4">
<a href="#" class="block text-black dark:text-white hover:underline text-xl">Contact</a>
</li>
</ul>
</nav>
</div>
<!-- Content Area (for demonstration) -->
<div class="flex-1 p-10">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Main Content Area</h1>
<p class="text-gray-700 dark:text-gray-300">
This is where the main content of your blog or article would go.
The sidebar provides navigation on the left.
</p>
</div>
</div>