Componentes Mega Menú Componente Mega Menú

Componente Mega Menú

Un Mega Componente de Menú con estilo Neumorphism con un esquema de color monocromático diseñado para blogs y consumo de contenido. Es compatible con el diseño responsivo con modo oscuro.

Vista previa

Código HTML

<header class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
  <nav class="container mx-auto flex justify-between items-center">
    <div class="flex items-center space-x-8">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">My Blog</h1>
      <div class="hidden md:flex space-x-6">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 transition">Home</a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 transition">About</a>
        <div class="relative group">
          <button class="text-gray-600 dark:text-gray-300 focus:outline-none hover:text-gray-800 dark:hover:text-gray-100 transition">Categories</button>
          <div class="absolute left-0 z-10 hidden w-48 bg-white dark:bg-gray-700 rounded-lg shadow-lg group-hover:block">
            <ul class="py-2">
              <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Web Development</a></li>
              <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Design</a></li>
              <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Marketing</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="hidden md:block">
      <a href="#" class="relative inline-block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 transition">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
      </a>
    </div>
    <div class="md:hidden">
      <button class="text-gray-600 dark:text-gray-300 focus:outline-none">
        <!-- Hamburger icon -->
        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </nav>
</header>

<main class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg mt-4">
  <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Recent Posts</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/500/300?random=1" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
      <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 1</h3>
      <p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/500/300?random=2" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
      <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 2</h3>
      <p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/500/300?random=3" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
      <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 3</h3>
      <p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/500/300?random=4" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
      <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 4</h3>
      <p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
    </div>
  </div>
</main>

Componentes relacionados

Componente Mega Menú

Un componente de mega menú receptivo diseñado con un estilo skeuomórfico usando Tailwind CSS, con soporte para el modo oscuro.

Abrir

Mega Menú Retro Vintage

Un mega componente de menú receptivo diseñado en un estilo retro / vintage inspirado en la estética de los años 80 y 90, con soporte para temas oscuros e imágenes de marcador de posición.

Abrir

Componente Mega Menú

Un Mega Componente de Menú responsivo diseñado con estilo Glassmorphism, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, que admite temas oscuros usando Tailwind CSS.

Abrir