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>

관련 구성 요소

메가 메뉴 컴포넌트

3D 디자인, 유사한 색 구성표 및 다크 모드를 지원하는 반응형 Tailwind CSS 메가 메뉴

열다

Glassmorphism 메가 메뉴 컴포넌트

Glassmorphism Mega Menu for Dashboard는 트라이어딕 색 구성표와 인터페이스합니다. 젖빛 유리 효과, 반응형 디자인, Tailwind CSS를 사용한 다크 모드 지원이 특징입니다.

열다

메가 메뉴 컴포넌트

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

열다