탐색 구성 요소
전자 상거래 웹 사이트를 위한 미니멀한 탐색 구성 요소로, 로고, 검색 창, 탐색 링크, 장바구니 아이콘 및 Tailwind CSS를 사용하는 사용자 아바타를 특징으로 합니다. 이 구성 요소는 반응형 디자인과 다크 모드를 지원합니다.
HTML 코드
<nav class="bg-white dark:bg-gray-800 p-4 flex items-center justify-between"> <div class="flex items-center"> <img src="https://picsum.photos/100/50" alt="Logo" class="h-10 mr-4"> <ul class="hidden md:flex space-x-8 text-gray-700 dark:text-gray-300"> <li><a href="#" class="hover:underline">Home</a></li> <li><a href="#" class="hover:underline">Shop</a></li> <li><a href="#" class="hover:underline">About</a></li> <li><a href="#" class="hover:underline">Contact</a></li> </ul> </div> <div class="flex items-center"> <div class="relative"> <input type="text" placeholder="Search" class="border border-gray-300 dark:border-gray-600 rounded-lg py-2 pl-10 pr-4 focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-600"><span class="absolute left-3 top-2 text-gray-400 dark:text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M16.65 10.65A5.48 5.48 0 0015 12a5.48 5.48 0 01-1.65 4.35A5.48 5.48 0 0012 17a5.48 5.48 0 00-4.35-1.65A5.48 5.48 0 007 12a5.48 5.48 0 011.65-4.35A5.48 5.48 0 0012 7c1.3 0 2.57.47 3.65 1.65z"/></svg></span> </div> <a href="#" class="ml-4 text-gray-700 dark:text-gray-300 relative"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h18M3 12h18M3 21h18"/></svg> <span class="absolute -top-1 -right-1 bg-red-500 text-white rounded-full h-5 w-5 flex items-center justify-center text-xs">0</span> </a> <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="ml-4 rounded-full h-10 w-10"> </div> <button class="md:hidden text-gray-700 dark:text-gray-300 focus:outline-none"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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></nav>