반투명 유리와 같은 반투명 요소와 어두운 테마를 지원하는 Glassmorphism 디자인을 특징으로 하는 반응형 헤더 구성 요소입니다.
<header class="bg-white bg-opacity-30 backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-60 shadow-lg p-4 flex justify-between items-center"> <div class="flex items-center"> <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full mr-2"> <h1 class="text-xl font-bold text-gray-900 dark:text-white">My Website</h1> </div> <nav class="space-x-4"> <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Home</a> <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">About</a> <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Services</a> <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Contact</a> </nav> <div class="flex items-center"> <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10"> </div> </header>
microinteractions 및 어두운 테마를 지원하는 반응형 헤더 구성 요소입니다.
다크 모드를 지원하는 반응형 헤더 구성 요소로, 로고, 탐색 링크 및 클릭 유도문안 버튼을 제공합니다. 이 디자인은 눈의 피로를 줄이기 위해 어두운 배경을 사용합니다.
비즈니스 웹 사이트를 위한 다크 모드 지원이 있는 반응형 헤더 구성 요소