Componentes de búsqueda

Categorías

Mega Menú

Gran panel desplegable que muestra múltiples opciones de navegación

Componente Mega Menú

Un mega componente de menú receptivo diseñado con un aspecto 3D, que incluye efectos de profundidad y soporte para temas oscuros utilizando Tailwind CSS. El componente presenta imágenes y avatares de usuario de servicios de marcador de posición.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
    <div class="flex justify-between items-center p-4 border-b border-gray-200 dark:border-gray-700">
        <div class="text-xl font-semibold text-gray-800 dark:text-gray-200">Mega Menu</div>
        <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none">
            Menu
        </button>
    </div>
    <div class="grid grid-cols-3 gap-4 p-4">
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="rounded-md mb-2">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Category 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for category 1.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image" class="rounded-md mb-2">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Category 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for category 2.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100?random=3" alt="Placeholder Image" class="rounded-md mb-2">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Category 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for category 3.</p>
        </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
        <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2">User Profiles</h4>
        <div class="flex flex-wrap">
            <div class="flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-2 mr-2 mb-2 shadow-md">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">User 1</span>
            </div>
            <div class="flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-2 mr-2 mb-2 shadow-md">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">User 2</span>
            </div>
            <div class="flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-2 mr-2 mb-2 shadow-md">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">User 3</span>
            </div>
        </div>
    </div>
</div>

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

                <nav class="bg-gray-800 text-white p-4 dark:bg-gray-900">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-2xl font-bold">
      Retro Menu
    </div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="hover:text-gray-400 transition duration-200">Home</a>
      <a href="#" class="hover:text-gray-400 transition duration-200">About</a>
      <a href="#" class="hover:text-gray-400 transition duration-200">Services</a>
      <a href="#" class="hover:text-gray-400 transition duration-200">Contact</a>
      <div class="relative group">
        <button class="hover:text-gray-400 transition duration-200">
          More
        </button>
        <div class="absolute left-0 hidden bg-gray-800 text-white group-hover:block transition duration-200 rounded shadow-lg">
          <div class="p-4">
            <h3 class="text-lg font-semibold">Categories</h3>
            <div class="flex flex-col mt-2 space-y-2">
              <a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
                <img src="https://picsum.photos/40/40?random=1" alt="Category 1" class="rounded-full">
                <span>Category 1</span>
              </a>
              <a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
                <img src="https://picsum.photos/40/40?random=2" alt="Category 2" class="rounded-full">
                <span>Category 2</span>
              </a>
              <a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
                <img src="https://picsum.photos/40/40?random=3" alt="Category 3" class="rounded-full">
                <span>Category 3</span>
              </a>
              <a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
                <img src="https://picsum.photos/40/40?random=4" alt="Category 4" class="rounded-full">
                <span>Category 4</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="md:hidden">
      <button class="hover:text-gray-400 transition duration-200">
        Menu
      </button>
    </div>
  </div>
</nav>

<div class="bg-gray-100 dark:bg-gray-800">
  <div class="container mx-auto p-6">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Featured Items</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/400/300?random=5" alt="Featured Item 1" class="w-full">
        <div class="p-4">
          <h3 class="text-lg font-bold text-gray-900 dark:text-white">Featured Item 1</h3>
          <p class="text-gray-600 dark:text-gray-300">Description of the item goes here.</p>
        </div>
      </div>
      <div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/400/300?random=6" alt="Featured Item 2" class="w-full">
        <div class="p-4">
          <h3 class="text-lg font-bold text-gray-900 dark:text-white">Featured Item 2</h3>
          <p class="text-gray-600 dark:text-gray-300">Description of the item goes here.</p>
        </div>
      </div>
      <div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/400/300?random=7" alt="Featured Item 3" class="w-full">
        <div class="p-4">
          <h3 class="text-lg font-bold text-gray-900 dark:text-white">Featured Item 3</h3>
          <p class="text-gray-600 dark:text-gray-300">Description of the item goes here.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Dark mode styles */
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #1a202c;
      color: white;
    }
  }
</style>

Mega componente de menú neumórfico

Un mega componente de menú neumórfico con comportamiento receptivo y soporte para modo oscuro.

Abrir Vista previa

                <nav class="neumorphic-mega-menu bg-gray-200 dark:bg-gray-800 transition duration-500 ease-in-out">
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
    <div class="text-xl font-bold text-gray-800 dark:text-white">My Logo</div>
    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out">Home</a>
      <div class="group relative">
        <button class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out">Products</button>
        <div class="absolute left-0 mt-2 w-64 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transform scale-95 group-hover:scale-100 transition duration-300 ease-in-out">
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 1</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 2</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 3</a>
        </div>
      </div>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out">About</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out">Contact</a>
    </div>
    <button class="md:hidden text-gray-700 dark:text-gray-300 focus:outline-none">
      <svg class="w-6 h-6" 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 12h16m-7 6h7"></path></svg>
    </button>
  </div>
  <div class="md:hidden mobile-menu hidden">
    <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600">Home</a>
    <div class="group relative">
      <button class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 w-full text-left">Products</button>
      <div class="pl-4">
        <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 1</a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 2</a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 3</a>
      </div>
    </div>
    <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600">About</a>
    <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600">Contact</a>
  </div>
</nav>

<style>
.neumorphic-mega-menu {
  box-shadow: 5px 5px 10px #b0b0b0, -5px -5px 10px #ffffff;
}

.dark .neumorphic-mega-menu {
  box-shadow: 5px 5px 10px #444444, -5px -5px 10px #333333;
}
</style>

Componente Mega Menú

Un componente de Mega Menú responsivo diseñado con Tailwind CSS, con microinteracciones para animaciones atractivas y soporte para temas oscuros.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <div class="flex justify-between items-center">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Mega Menu</h2>
        <button class="focus:outline-none hover:bg-gray-200 dark:hover:bg-gray-700 p-2 rounded-lg transition ease-in-out duration-300">Menu</button>
    </div>
    <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden p-4 transition-transform transform hover:scale-105">
            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Category 1</h3>
            <ul class="mt-2">
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 1</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 2</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 3</a></li>
            </ul>
            <img src="https://picsum.photos/200/150?random=1" alt="Category 1" class="mt-4 rounded-lg w-full">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden p-4 transition-transform transform hover:scale-105">
            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Category 2</h3>
            <ul class="mt-2">
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 1</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 2</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 3</a></li>
            </ul>
            <img src="https://picsum.photos/200/150?random=2" alt="Category 2" class="mt-4 rounded-lg w-full">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden p-4 transition-transform transform hover:scale-105">
            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Category 3</h3>
            <ul class="mt-2">
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 1</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 2</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 3</a></li>
            </ul>
            <img src="https://picsum.photos/200/150?random=3" alt="Category 3" class="mt-4 rounded-lg w-full">
        </div>
    </div>
    <div class="mt-6 border-t border-gray-300 dark:border-gray-600 pt-4">
        <h4 class="font-semibold text-gray-900 dark:text-white">Follow Us</h4>
        <div class="flex space-x-4 mt-2">
            <a href="#" class="flex items-center space-x-2 transition duration-200 hover:text-blue-500 dark:hover:text-blue-300">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-8 h-8 rounded-full">
                <span>Profile 1</span>
            </a>
            <a href="#" class="flex items-center space-x-2 transition duration-200 hover:text-blue-500 dark:hover:text-blue-300">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-8 h-8 rounded-full">
                <span>Profile 2</span>
            </a>
        </div>
    </div>
</div>

Componente Mega Menú

Un componente de Mega Menú responsivo con estilo Skeuomorphism, con soporte para temas oscuros usando Tailwind CSS.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
  <div class="flex justify-between items-center">
    <div class="flex items-center">
      <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-3">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Website</h1>
    </div>
    <button class="text-gray-800 dark:text-white focus:outline-none">
      <svg class="w-6 h-6" 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 12h16m-7 6h7"/>
      </svg>
    </button>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 1</h2>
      <ul class="mt-2">
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 2</h2>
      <ul class="mt-2">
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 3</h2>
      <ul class="mt-2">
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
      </ul>
    </div>
  </div>
  <div class="mt-6">
    <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Featured Users</h2>
    <div class="flex space-x-4 mt-2">
      <div class="flex flex-col items-center">
        <img src="https://picsum.photos/50/50" alt="User 1" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
        <span class="text-gray-800 dark:text-gray-200">User 1</span>
      </div>
      <div class="flex flex-col items-center">
        <img src="https://picsum.photos/50/50" alt="User 2" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
        <span class="text-gray-800 dark:text-gray-200">User 2</span>
      </div>
      <div class="flex flex-col items-center">
        <img src="https://picsum.photos/50/50" alt="User 3" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
        <span class="text-gray-800 dark:text-gray-200">User 3</span>
      </div>
    </div>
  </div>
</div>

Componente de Mega Menú Minimalista

Componente de Mega Menú Minimalista con efectos responsivos y soporte de temas oscuros, sin JavaScript.

Abrir Vista previa

                <nav class="bg-white dark:bg-gray-900 shadow-md">
  <div class="container mx-auto px-6 py-3">
    <div class="flex justify-between items-center">
      <a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">Logo</a>
      <div class="hidden lg:flex lg:items-center">
        <a href="#" class="text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-3 py-2">Home</a>
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-3 py-2 focus:outline-none">Products</button>
          <div class="absolute left-0 mt-0 w-64 bg-white dark:bg-gray-800 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Product 1</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Product 2</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Product 3</a>
          </div>
        </div>
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-3 py-2 focus:outline-none">Services</button>
          <div class="absolute left-0 mt-0 w-64 bg-white dark:bg-gray-800 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Service 1</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Service 2</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Service 3</a>
          </div>
        </div>
        <a href="#" class="text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-3 py-2">Contact</a>
      </div>
      <button class="lg:hidden text-gray-800 dark:text-white focus:outline-none">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>
    <div class="lg:hidden mt-3">
      <a href="#" class="block text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-2 py-1">Home</a>
      <a href="#" class="block text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-2 py-1">Products</a>
      <a href="#" class="block text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-2 py-1">Services</a>
      <a href="#" class="block text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-2 py-1">Contact</a>
    </div>
  </div>
</nav>

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

                <div class="relative bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
    <div class="absolute inset-0 bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-50 backdrop-blur-md"></div>
    <nav class="relative z-10">
        <div class="container mx-auto px-4 py-6">
            <div class="flex justify-between items-center">
                <div class="text-2xl font-bold text-gray-800 dark:text-white">Brand</div>
                <div class="hidden lg:flex space-x-8">
                    <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Home</a>
                    <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">About</a>
                    <div class="relative group">
                        <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Services</a>
                        <div class="absolute left-0 hidden mt-2 w-48 bg-white dark:bg-gray-900 rounded-lg shadow-lg group-hover:block">
                            <div class="p-4">
                                <a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">Web Design</a>
                                <a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">SEO Services</a>
                                <a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">Marketing</a>
                            </div>
                        </div>
                    </div>
                    <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Contact</a>
                </div>
                <div class="lg:hidden">
                    <button class="text-gray-800 dark:text-white focus:outline-none">
                        <svg class="w-6 h-6" 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 12h16m-7 6h7"/></svg>
                    </button>
                </div>
            </div>
        </div>
    </nav>
    <div class="hidden lg:block relative overflow-hidden">
        <img class="object-cover w-full h-64 opacity-50" src="https://picsum.photos/800/400" alt="Mega Menu Background">
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-50 p-6 rounded-lg shadow-lg">
                <h2 class="text-3xl font-bold text-gray-800 dark:text-white">Welcome to Our Services</h2>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Explore our range of services tailored for your business needs.</p>
                <a href="#" class="mt-4 inline-block bg-blue-500 text-white font-bold py-2 px-4 rounded-lg shadow hover:bg-blue-600">Get Started</a>
            </div>
        </div>
    </div>
    <footer class="text-center py-4 bg-gray-200 dark:bg-gray-700">
        <p class="text-gray-800 dark:text-white">© 2023 My Company</p>
    </footer>
</div>

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

                <div class="relative bg-white dark:bg-gray-800">
    <nav class="flex items-center justify-between p-4 shadow-lg">
        <div class="text-2xl font-bold text-gray-800 dark:text-white">My Website</div>
        <ul class="flex space-x-6">
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">Home</a></li>
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">About</a></li>
            <li class="relative">
                <a href="#" class="text-gray-800 dark:text-white hover:underline">Services</a>
                <div class="absolute left-0 hidden mt-2 w-48 bg-white dark:bg-gray-700 shadow-lg rounded-lg transition duration-300 transform scale-95 hover:scale-100" id="menu">
                    <div class="p-4">
                        <h3 class="text-gray-800 dark:text-white font-semibold">Web Design</h3>
                        <img src="https://picsum.photos/200/100?random=1" alt="Web Design" class="my-2 rounded-lg shadow-lg">
                        <p class="text-gray-600 dark:text-gray-300">Creating visually appealing websites.</p>
                    </div>
                    <div class="border-t border-gray-200 dark:border-gray-600"></div>
                    <div class="p-4">
                        <h3 class="text-gray-800 dark:text-white font-semibold">SEO Services</h3>
                        <img src="https://picsum.photos/200/100?random=2" alt="SEO Services" class="my-2 rounded-lg shadow-lg">
                        <p class="text-gray-600 dark:text-gray-300">Optimizing search engine results.</p>
                    </div>
                    <div class="border-t border-gray-200 dark:border-gray-600"></div>
                    <div class="p-4">
                        <h3 class="text-gray-800 dark:text-white font-semibold">Marketing</h3>
                        <img src="https://picsum.photos/200/100?random=3" alt="Marketing" class="my-2 rounded-lg shadow-lg">
                        <p class="text-gray-600 dark:text-gray-300">Promoting your business effectively.</p>
                    </div>
                </div>
            </li>
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">Contact</a></li>
        </ul>
    </nav>
    <div class="hidden md:block mt-4 p-4 bg-gray-100 dark:bg-gray-600 rounded-lg">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">Team Members</h2>
        <div class="flex space-x-4 mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-12 h-12 rounded-full" alt="Avatar">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" class="w-12 h-12 rounded-full" alt="Avatar">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" class="w-12 h-12 rounded-full" alt="Avatar">
        </div>
    </div>
</div>
<style>
    /* Dark mode styles */
    .dark .bg-gray-800 {
        background-color: #333;
    }
    .dark .text-gray-800 {
        color: #f7fafc;
    }
</style>

Componente Mega Menú

Un mega componente de menú receptivo diseñado con un enfoque en microinteracciones y soporte de temas oscuros usando Tailwind CSS.

Abrir Vista previa

                <div class="relative bg-white dark:bg-gray-800">
  <nav class="flex flex-col md:flex-row justify-between items-center p-4">
    <div class="flex items-center">
      <a href="#" class="text-lg font-semibold text-gray-800 dark:text-white hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">Brand</a>
      <div class="hidden md:flex space-x-4 ml-8">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">Home</a>
        <div class="relative group">
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">Services</a>
          <div class="absolute left-0 hidden mt-2 w-48 bg-white dark:bg-gray-900 shadow-lg rounded-lg group-hover:block transition duration-150 ease-in-out">
            <ul class="py-2">
              <li class="px-4 py-2 hover:bg-blue-100 dark:hover:bg-gray-700"><a href="#" class="block text-gray-800 dark:text-gray-300">Web Design</a></li>
              <li class="px-4 py-2 hover:bg-blue-100 dark:hover:bg-gray-700"><a href="#" class="block text-gray-800 dark:text-gray-300">SEO</a></li>
              <li class="px-4 py-2 hover:bg-blue-100 dark:hover:bg-gray-700"><a href="#" class="block text-gray-800 dark:text-gray-300">Content Writing</a></li>
            </ul>
          </div>
        </div>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">About Us</a>
      </div>
    </div>
    <div class="md:hidden">
      <button class="text-gray-600 dark:text-gray-300 focus:outline-none hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">
        <svg class="w-6 h-6" 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 12h16m-7 6h7"/>
        </svg>
      </button>
    </div>
  </nav>

  <div class="mt-4 max-w-6xl mx-auto px-2">
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 transition duration-150 ease-in-out hover:shadow-lg">
        <img src="https://picsum.photos/200/150?random=1" alt="Placeholder" class="rounded mb-4" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Service One</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description of the service offered.</p>
      </div>
      <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 transition duration-150 ease-in-out hover:shadow-lg">
        <img src="https://picsum.photos/200/150?random=2" alt="Placeholder" class="rounded mb-4" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Service Two</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description of the service offered.</p>
      </div>
      <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 transition duration-150 ease-in-out hover:shadow-lg">
        <img src="https://picsum.photos/200/150?random=3" alt="Placeholder" class="rounded mb-4" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Service Three</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description of the service offered.</p>
      </div>
      <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 transition duration-150 ease-in-out hover:shadow-lg">
        <img src="https://picsum.photos/200/150?random=4" alt="Placeholder" class="rounded mb-4" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Service Four</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description of the service offered.</p>
      </div>
    </div>
  </div>
</div>