CCHub Logo CCHub Tailwind Collection
구성 요소 메가 메뉴 메가 메뉴 컴포넌트

메가 메뉴 컴포넌트

브루탈리즘 디자인 스타일의 메가 메뉴 구성 요소로, 단색 색 구성표와 블로그 또는 콘텐츠 플랫폼에 적합한 반응형 디자인을 특징으로 합니다.

미리 보기

HTML 코드 

<div class="bg-gray-900 text-gray-100 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <h1 class="text-3xl font-bold">My Blog</h1>
    <button class="text-gray-100 hover:text-gray-300">Menu</button>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
    <div class="bg-gray-800 p-4 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold">Category 1</h2>
      <ul class="list-disc list-inside">
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 1</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 2</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold">Category 2</h2>
      <ul class="list-disc list-inside">
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 1</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 2</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold">Category 3</h2>
      <ul class="list-disc list-inside">
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 1</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 2</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 3</a></li>
      </ul>
    </div>
  </div>
  <div class="mt-8 flex justify-evenly">
    <div class="bg-gray-800 p-4 rounded-lg w-1/4">
      <img src="https://picsum.photos/200/300?random" alt="Random Image" class="rounded-lg mb-2"/>
      <p class="text-lg">Featured Image</p>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg w-1/4">
      <img src="https://picsum.photos/200/300?random" alt="Random Image" class="rounded-lg mb-2"/>
      <p class="text-lg">Featured Image</p>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg w-1/4">
      <img src="https://picsum.photos/200/300?random" alt="Random Image" class="rounded-lg mb-2"/>
      <p class="text-lg">Featured Image</p>
    </div>
  </div>
  <div class="text-center mt-4">
    <p class="text-sm">© 2023 My Blog. All rights reserved.</p>
  </div>
</div>

관련 구성 요소

메가 메뉴 컴포넌트

Glassmorphism 스타일, 단색 색 구성표, 복잡한 복잡성 수준을 가진 Mega Menu 구성 요소, 대시 보드 목적. 어두운 테마를 지원하는 반응형 디자인. Tailwind CSS를 사용합니다. 자바스크립트 코드가 필요하지 않습니다.

열다

메가 메뉴 컴포넌트 - Neumorphic Vibrant E-commerce

복잡하고 반응이 빠른 메가 메뉴 구성 요소는 뉴모픽하고 생생한 전자 상거래 스타일로 설계되었습니다. 여러 열, 이미지 예제 및 범주 목록을 제공하며 완전한 다크 모드를 지원합니다.

열다

레트로 메가 메뉴

반응형 효과와 어두운 테마를 지원하는 레트로/빈티지 스타일의 메가 메뉴 구성 요소로, Tailwind CSS를 사용하여 구현되었습니다. JavaScript는 포함되어 있지 않습니다. 다크 모드는 순전히 CSS로 처리됩니다.

열다