구성 요소 메가 메뉴 메가 메뉴 컴포넌트 - 네온 글로우

메가 메뉴 컴포넌트 - 네온 글로우

네온/글로우 효과, 따뜻한 무채색 및 다크 모드 지원을 갖춘 간단하고 반응이 빠른 메가 메뉴 구성 요소로 예약/예약 시스템에 적합합니다.

미리 보기

HTML 코드

<nav class="bg-gradient-to-r from-stone-100 to-amber-50 dark:from-stone-900 dark:to-stone-800 p-4 shadow-sm font-sans relative">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-stone-800 dark:text-stone-100 text-2xl font-bold tracking-tight relative">
      GlowBook
      <span class="absolute inset-0 block rounded-full blur-sm opacity-50 bg-amber-300 dark:bg-amber-600 animate-pulse"></span>
    </a>
    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-stone-600 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 text-lg font-medium relative group transition duration-300">
        Book Now
        <span class="absolute inset-0 block rounded-full blur-sm opacity-0 group-hover:opacity-20 transition-opacity duration-300 bg-amber-300 dark:bg-amber-600"></span>
      </a>
      <a href="#" class="text-stone-600 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 text-lg font-medium relative group transition duration-300">
        Services
        <span class="absolute inset-0 block rounded-full blur-sm opacity-0 group-hover:opacity-20 transition-opacity duration-300 bg-amber-300 dark:bg-amber-600"></span>
      </a>
      <a href="#" class="text-stone-600 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 text-lg font-medium relative group transition duration-300">
        About Us
        <span class="absolute inset-0 block rounded-full blur-sm opacity-0 group-hover:opacity-20 transition-opacity duration-300 bg-amber-300 dark:bg-amber-600"></span>
      </a>
      <a href="#" class="text-stone-600 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 text-lg font-medium relative group transition duration-300">
        Contact
        <span class="absolute inset-0 block rounded-full blur-sm opacity-0 group-hover:opacity-20 transition-opacity duration-300 bg-amber-300 dark:bg-amber-600"></span>
      </a>
    </div>
    <div class="md:hidden">
      <button aria-label="Toggle menu" class="text-stone-700 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 rounded p-1.5 focus:ring-offset-2 focus:ring-offset-stone-100 dark:focus:ring-offset-stone-900">
        <svg class="w-7 h-7" 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-7 6h7"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

관련 구성 요소

메가 메뉴 컴포넌트

Tailwind CSS를 사용하여 다크 모드 UI, 유사한 색 구성표 및 대시보드 목적을 위한 복잡한 복잡성이 있는 메가 메뉴 구성 요소. 반응형이어야 하며 Tailwind dark: 접두사를 사용하여 어두운 테마를 지원해야 합니다. JavaScript 코드가 필요하지 않으며 Tailwind 클래스가 있는 HTML만 있습니다. 이미지는 picsum.photos에서, 아바타는 randomuser.me 에서 가져옵니다.

열다

메가 메뉴 컴포넌트

Tailwind CSS를 사용하여 마이크로 인터랙션 및 어두운 테마 지원에 중점을 두고 설계된 반응형 메가 메뉴 구성 요소입니다.

열다

메가 메뉴 컴포넌트

미니멀리스트/플랫 디자인, 생생한 색 구성표, 복잡한 복잡성 수준이 있는 메가 메뉴 구성 요소, 대시보드 목적, Tailwind CSS 사용. 어두운 테마를 지원하는 반응형 디자인. JavaScript 코드는 없으며 Tailwind 클래스가있는 HTML 만 있습니다. 다크 모드는 스타일링을 위해 Tailwind의 dark: 접두사를 사용합니다. 이미지는 아바타에 picsum.photos 및 randomuser.me 를 사용합니다.

열다