CCHub Logo CCHub Tailwind Collection
Komponenten Mega-Menü Mega-Menü-Komponente

Mega-Menü-Komponente

Eine Mega-Menükomponente mit einem brutalistischen Designstil mit einem monochromen Farbschema und responsivem Design, das für einen Blog oder eine Content-Plattform geeignet ist.

Vorschau

HTML-Code 

<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>

Verwandte Komponenten

Brutalistisches Mega-Menü

Eine reaktionsschnelle Mega-Menükomponente mit brutalistischem Design mit Erdtönen und Unterstützung des Dunkelmodus für einen Blog oder eine inhaltsgesteuerte Website.

Offen

Mega Menu Komponente - Dating/Soziale Netzwerke

Eine einfache, reaktionsschnelle Mega-Menü-Komponente, die für Dating-/Social-Media-Plattformen entwickelt wurde, mit Mikrointeraktionen und einem lila/violetten Farbschema. Enthält Unterstützung für den Dunkelmodus.

Offen

Skeuomorphismus Social Media Mega Menü

Mega-Menükomponente mit Skeuomorphismus-Design, triadischem Farbschema und einfacher Komplexität für Social-Media-Zwecke. Reaktionsschnell mit Unterstützung für dunkle Themen.

Offen