사이드바 구성 요소
레트로/빈티지 스타일로 디자인된 반응형 사이드바 구성 요소로, 대시보드 레이아웃을 위한 생생한 색상으로 디자인되었습니다. 여기에는 다크 모드에 대한 지원이 포함됩니다.
HTML 코드
<div class="flex flex-col w-64 h-screen p-4 bg-blue-600 text-white dark:bg-blue-900">
<h2 class="text-2xl font-bold mb-6 text-yellow-500">Dashboard</h2>
<div class="flex flex-col space-y-4">
<a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Home</a>
<a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Reports</a>
<a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Analytics</a>
<a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Settings</a>
</div>
<div class="mt-auto pt-4 border-t border-gray-300 dark:border-gray-700">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<span class="text-sm font-semibold">John Doe</span>
</div>
</div>
</div>관련 구성 요소
Cryptocurrency Sidebar 구성 요소
암호화폐 및 블록체인 애플리케이션용으로 설계된 복잡하고 반응형이 빠른 사이드바 구성 요소로, 음소거된 색 구성표와 완전한 다크 모드를 지원하는 머티리얼 디자인 원칙을 특징으로 합니다.
사이드바 구성 요소
Tailwind CSS를 사용하여 디자인된 반응형 다크 모드 사이드바 구성 요소로, 어두운 배경, 호버 효과, 이미지 및 아바타에 대한 자리 표시자를 제공합니다.