구성 요소 머리글 스케우오 헤더 컴포넌트

스케우오 헤더 컴포넌트

Skeuomorphism 디자인, 어두운 테마 지원 및 탐색 모음이 있는 반응형 헤더 구성 요소입니다.

미리 보기

HTML 코드

<header class="bg-gray-200 dark:bg-gray-800 shadow-lg dark:shadow-none">
  <div class="container mx-auto px-6 py-4 flex items-center justify-between">
    <div class="text-xl font-semibold text-gray-800 dark:text-white">SkeuoHeader</div>
    <nav class="hidden md:flex space-x-8">
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Home</a>
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">About</a>
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Services</a>
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Contact</a>
    </nav>
    <button class="md:hidden text-gray-800 dark:text-white focus:outline-none">
      <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 12h16M4 18h16"></path>
      </svg>
    </button>
  </div>
</header>

관련 구성 요소

헤더 구성 요소

생생한 색상의 Neumorphism 스타일을 사용하여 설계된 간단한 헤더 구성 요소로, 블로그/콘텐츠 웹 페이지에 적합합니다. 반응형 디자인을 위한 다크 모드 지원이 특징입니다.

열다

Brutalist 헤더 구성 요소

Tailwind CSS로 디자인된 원시적이고 대담한 헤더 구성 요소로, 밝은 테마와 어두운 테마 모두에 적합한 높은 대비와 특이한 레이아웃을 특징으로 합니다.

열다

헤더 구성 요소

반투명 유리와 같은 반투명 요소와 어두운 테마를 지원하는 Glassmorphism 디자인을 특징으로 하는 반응형 헤더 구성 요소입니다.

열다