사이드바 구성 요소
Tailwind CSS를 사용하여 Neumorphism 스타일로 설계된 반응형 사이드바 구성 요소입니다. 미묘한 그림자가 있는 부드러운 UI 모양이 특징이며 어두운 모드를 지원하며 자리 표시자 이미지와 아바타가 포함되어 있습니다.
HTML 코드
<div class="flex bg-gray-200 dark:bg-gray-800 h-screen">
<div class="w-64 h-full shadow-lg rounded-xl bg-gray-300 dark:bg-gray-700 p-4">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-sm"/>
<h2 class="ml-3 text-xl font-semibold text-gray-800 dark:text-gray-100">User Name</h2>
</div>
<nav>
<ul>
<li class="my-2">
<a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Dashboard</a>
</li>
<li class="my-2">
<a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Profile</a>
</li>
<li class="my-2">
<a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Settings</a>
</li>
<li class="my-2">
<a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Logout</a>
</li>
</ul>
</nav>
</div>
<div class="flex-1 p-10 bg-gray-100 dark:bg-gray-900">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Main Content</h1>
<img src="https://picsum.photos/500/300" alt="Placeholder" class="mt-4 rounded-lg shadow-md"/>
</div>
</div>관련 구성 요소
Neumorphism Sidebar 구성 요소
Neumorphism 디자인, Earth tones 색 구성표 및 단순한 복잡성을 갖춘 반응형 사이드바 구성 요소로 블로그 또는 콘텐츠 소비에 적합합니다. 다크 모드 지원이 포함됩니다.
Retro Sidebar 구성 요소
작업이나 제품을 전시하기 위한 레트로/빈티지 디자인의 반응형 사이드바 구성 요소로, 그레이스케일 색 구성표와 Tailwind CSS 클래스를 활용하여 다크 모드를 지원합니다.