Navigation 구성 요소
반응형 다크 모드 탐색 구성 요소는 파스텔 색 구성표와 단순한 레이아웃으로 전자 상거래를 위해 설계되었습니다.
HTML 코드
<nav class="bg-gray-800 dark:bg-gray-900 p-4">
<div class="container mx-auto flex items-center justify-between">
<div class="flex items-center space-x-4">
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Home</a>
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Shop</a>
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">About Us</a>
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Contact</a>
</div>
<div class="flex items-center space-x-4">
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
</a>
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Cart</a>
</div>
</div>
</nav>관련 구성 요소
대시보드 탐색(Material Design)
Material Design Dashboard Navigation Component는 트라이어딕 색 구성표와 다크 모드를 지원합니다.
브루탈리즘 전자상거래 내비게이션
전자 상거래를 위한 브루탈리즘 스타일의 탐색 구성 요소로, Tailwind CSS로 구축된 회색조 색 구성표, 복잡한 레이아웃, 응답성 및 다크 모드 지원을 특징으로 합니다.