복잡한 대시보드 헤더
3D 디자인 요소, 흙색 색 구성표가 있는 복잡하고 반응이 빠른 헤더 구성 요소로, 대시보드용으로 설계되었습니다. Tailwind CSS를 사용하는 어두운 테마 지원을 포함하며 데모 이미지/아바타에 picsum.photos 및 randomuser.me 사용합니다.
HTML 코드
<header class="bg-gradient-to-br from-gray-700 via-gray-800 to-gray-900 text-white dark:from-gray-900 dark:via-gray-950 dark:to-black shadow-2xl">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-10 w-10 text-green-500 dark:text-green-400" 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="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm9 9b2 0 002-2v-2a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2h2z"></path></svg>
</div>
<div class="ml-3">
<h1 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500 dark:from-green-300 dark:to-blue-400">Dashboard</h1>
</div>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300 ease-in-out transform hover:-translate-y-1">Overview</a>
<a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300 ease-in-out transform hover:-translate-y-1">Reports</a>
<a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300 ease-in-out transform hover:-translate-y-1">Analytics</a>
<a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300 ease-in-out transform hover:-translate-y-1">Settings</a>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 dark:focus:ring-offset-gray-900 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div class="md:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Overview</a>
<a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Reports</a>
<a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Analytics</a>
<a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Settings</a>
</div>
</div>
</header>