Glassmorphism 대시보드 탐색 모음
Glassmorphism 단색 복합 대시보드 탐색 모음 Tailwind CSS, 반응형 및 어두운 테마 지원.
HTML 코드
<nav class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="text-white font-bold text-xl">Dashboard</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="text-white hover:text-gray-200">Home</a>
<a href="#" class="text-white hover:text-gray-200">Settings</a>
<a href="#" class="text-white hover:text-gray-200">Reports</a>
<a href="#" class="text-white hover:text-gray-200">Users</a>
</div>
<div class="md:hidden">
<button class="text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path>
</svg>
</button>
</div>
</div>
</nav>관련 구성 요소
포트폴리오 탐색 모음
어두운 테마를 지원하는 반응형 탐색 모음으로, 머티리얼 디자인 원칙과 흙색 색 구성표를 사용하는 포트폴리오 웹사이트용으로 설계되었습니다. 여기에는 브랜드 로고, 탐색 링크 및 클릭 유도문안 버튼이 포함됩니다. 디자인은 적당히 복잡하며 다양한 화면 크기에 맞게 조정됩니다.
Navigation Bar 구성 요소
대시보드용 반응형 탐색 모음으로, 어스 톤의 다크 모드 테마를 특징으로 합니다. 로고, 탐색 링크, 검색 창 및 사용자 프로필 섹션이 포함됩니다. 대화형 요소를 사용하여 중간 정도의 복잡성을 제공하도록 설계되었습니다.