햄버거 메뉴 구성 요소 19
스켈레톤 햄버거 메뉴 컴포넌트는 실제 요소를 모방한 스큐어모픽 스타일로 디자인되었습니다. 반응형이며 Tailwind CSS를 사용하는 다크 모드 지원이 포함됩니다.
HTML 코드
<div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden w-64">
<div class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 p-4 rounded-t-lg">
<h1 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Menu</h1>
<button class="focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-800 dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
<div class="p-4 space-y-4">
<div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Home</span>
</div>
<div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
<img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">About</span>
</div>
<div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
<img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Services</span>
</div>
<div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
<img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Contact</span>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 bg-gray-300 dark:bg-gray-700 p-4 rounded-b-lg">
<a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Log Out</a>
</div>
</div>