유기농 그레이스케일 햄버거 메뉴
반응형 햄버거 메뉴 구성 요소로, 회색조 색 구성표를 사용하여 유기적이고 유려한 디자인 스타일을 가지고 있습니다. 문서 또는 Wiki 사이트에 이상적이며, 다크 모드 지원과 메뉴 토글에 대한 부드러운 전환 효과를 제공합니다.
HTML 코드
<div class="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
<nav class="container mx-auto px-4 py-3 flex items-center justify-between">
<a href="#" class="flex-shrink-0 text-gray-900 dark:text-gray-50 text-2xl font-bold font-serif italic tracking-wide">
FlowDocs
</a>
<!-- Mobile Hamburger Button -->
<button class="lg:hidden p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 group" aria-label="Toggle menu">
<div class="space-y-2">
<span class="block h-0.5 w-8 bg-gray-700 dark:bg-gray-300 transform transition duration-300 ease-in-out group-focus:translate-y-2 group-focus:rotate-45"></span>
<span class="block h-0.5 w-8 bg-gray-700 dark:bg-gray-300 transition duration-300 ease-in-out group-focus:opacity-0"></span>
<span class="block h-0.5 w-8 bg-gray-700 dark:bg-gray-300 transform transition duration-300 ease-in-out group-focus:-translate-y-2 group-focus:-rotate-45"></span>
</div>
</button>
<!-- Desktop Menu Items -->
<div class="hidden lg:flex items-center space-x-8">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
Documentation
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
Guides
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
API
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
Community
</a>
<a href="#" class="py-2 px-4 rounded-full bg-gray-800 text-gray-50 hover:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-50 transition duration-200 ease-in-out text-lg font-semibold shadow-md">
Get Started
</a>
</div>
</nav>
<!-- Mobile Menu (Invisible by default, would be toggled by JS) -->
<!-- For Tailwind-only, this would typically require a hidden/block class toggle. -->
<!-- As we are JS-free, this is a conceptual placeholder representing what would animate. -->
<div class="hidden lg:hidden flex-col items-stretch text-center pb-4 space-y-4 bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
<a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl shadow-inner">
Documentation
</a>
<a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl">
Guides
</a>
<a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl">
API
</a>
<a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl">
Community
</a>
<a href="#" class="mx-4 py-3 px-6 rounded-full bg-gray-800 text-gray-50 hover:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-50 transition duration-200 ease-in-out text-xl font-semibold shadow-lg">
Get Started
</a>
</div>
</div>