탐색 구성 요소
마이크로 인터랙션 및 어두운 테마를 지원하는 반응형 탐색 구성 요소로, Tailwind CSS를 사용하여 설계되었습니다.
HTML 코드
<nav class="bg-white dark:bg-gray-800 shadow-lg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
</div>
<div class="hidden md:block">
<div class="flex space-x-4">
<a href="#" class="text-gray-900 dark:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
Home
</a>
<a href="#" class="text-gray-900 dark:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
About
</a>
<a href="#" class="text-gray-900 dark:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
Services
</a>
<a href="#" class="text-gray-900 dark:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
Contact
</a>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" 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>
</div>
<div class="md:hidden">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="text-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
Home
</a>
<a href="#" class="text-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
About
</a>
<a href="#" class="text-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
Services
</a>
<a href="#" class="text-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
Contact
</a>
</div>
</div>
</nav>관련 구성 요소
Brutalism Navigation 구성 요소
브루탈리즘 스타일로 디자인된 반응형 탐색 구성 요소로, 단색 색 구성표를 보여 주며 포트폴리오 웹 사이트에 이상적입니다. 기능에는 고대비의 대담한 레이아웃, Tailwind CSS를 사용한 다크 모드 지원, 드롭다운 또는 버튼 링크와 같은 대화형 요소가 포함됩니다.
Navigation 구성 요소
Microinteractions로 디자인된 반응형 탐색 구성 요소로, 사용자 작업을 기반으로 매력적인 애니메이션을 제공하여 밝은 테마와 어두운 테마를 모두 지원합니다. 구성 요소에는 프로필 아바타, 탐색 링크 및 호버 효과가 포함됩니다.