CCHub Logo CCHub Tailwind Collection
구성 요소 탐색 구성 요소 Cyberpunk_Food_Nav

Cyberpunk_Food_Nav

음식/레스토랑 웹사이트를 위한 간단하고 반응이 빠른 사이버펑크 테마 탐색 구성 요소로, 어두운 배경, 네온 액센트 및 다크 모드 지원을 제공합니다.

미리 보기

HTML 코드 

<header class="bg-zinc-950 dark:bg-black text-lime-400 p-4 shadow-lg shadow-lime-900/30 dark:shadow-fuchsia-900/30">
  <nav class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-2xl font-bold font-mono tracking-wider transition-colors duration-300 hover:text-lime-200 dark:hover:text-fuchsia-400">
      BYTE BITES
    </a>

    <div class="hidden md:flex space-x-6 text-lg">
      <a href="#" class="hover:text-lime-200 dark:hover:text-fuchsia-400 transition-colors duration-300 relative group">
        <span class="relative z-10">Menu</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-lime-400 dark:bg-fuchsia-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="hover:text-lime-200 dark:hover:text-fuchsia-400 transition-colors duration-300 relative group">
        <span class="relative z-10">Order</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-lime-400 dark:bg-fuchsia-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="hover:text-lime-200 dark:hover:text-fuchsia-400 transition-colors duration-300 relative group">
        <span class="relative z-10">Locations</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-lime-400 dark:bg-fuchsia-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="hover:text-lime-200 dark:hover:text-fuchsia-400 transition-colors duration-300 relative group">
        <span class="relative z-10">Contact</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-lime-400 dark:bg-fuchsia-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
    </div>

    <div class="md:hidden">
      <button class="text-lime-400 dark:text-fuchsia-400 focus:outline-none focus:ring-2 focus:ring-lime-600 dark:focus:ring-fuchsia-600 rounded-md p-1">
        <svg class="w-8 h-8" 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 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </nav>
</header>

관련 구성 요소

Navigation Components 컴포넌트

생생한 색상과 미시적 상호작용을 가진 반응형 탐색 구성 요소로, 포트폴리오를 위해 설계되었습니다.

열다

Navigation Components 컴포넌트

대시보드를 위한 복잡하고 반응이 빠른 탐색 구성 요소로, 마이크로 인터랙션과 유사한 색 구성표를 특징으로 하며 다크 모드를 지원합니다. 스타일링을 위해 Tailwind CSS를 활용하고 JavaScript에 의존하지 않고 대화형 요소를 포함합니다.

열다

탐색 구성 요소

브루탈리즘 스타일로 디자인된 탐색 구성 요소로, 소셜 미디어 인터페이스를 위한 파스텔 색 구성표가 특징이며, 반응형 레이아웃과 어두운 테마 지원을 제공합니다.

열다