Componentes de búsqueda

Categorías

Componentes Menú desplegable

Menú desplegable

Submenús que aparecen al hacer clic o pasar el cursor

Memphis_Vibrant_Marketplace_Dropdown_Menu

Un componente de menú desplegable complejo y receptivo para un mercado, diseñado con una estética vibrante al estilo de Memphis. Cuenta con colores llamativos, formas geométricas y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="relative inline-block text-left font-sans">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-full border-4 border-yellow-400 dark:border-yellow-500 shadow-lg px-6 py-3 bg-fuchsia-500 text-lg font-extrabold text-white hover:bg-fuchsia-600 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-600 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 sm:text-base md:text-lg lg:text-xl" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Categories
      <svg class="-mr-1 ml-3 h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <!-- Dropdown menu, show/hide based on menu state. -->
  <div class="origin-top-right absolute right-0 mt-3 w-72 md:w-80 lg:w-96 rounded-3xl shadow-xl bg-gradient-to-br from-violet-500 to-pink-500 dark:from-violet-700 dark:to-pink-700 ring-4 ring-orange-400 dark:ring-orange-600 ring-offset-4 ring-offset-blue-300 dark:ring-offset-blue-900 focus:outline-none overflow-hidden transform scale-100 opacity-100 transition ease-out duration-300" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-2" role="none">
      <!-- Search Bar -->
      <div class="px-4 py-2 mb-2">
        <input type="text" placeholder="Search categories..." class="w-full p-3 rounded-xl border-2 border-indigo-400 dark:border-indigo-600 bg-white bg-opacity-90 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-300 dark:focus:ring-violet-500 transition duration-200 text-base sm:text-sm md:text-base">
      </div>
      
      <!-- Section Header -->
      <div class="px-4 py-2 bg-gradient-to-r from-teal-400 to-green-400 dark:from-teal-600 dark:to-green-600 text-white font-bold text-lg uppercase tracking-wide border-b-2 border-dotted border-white/50 dark:border-white/30 text-center rounded-t-xl sm:text-base md:text-lg">
        Top Categories
      </div>

      <!-- Menu Items -->
      <a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 border-b border-white/20 dark:border-white/10 last:border-0 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-0">
        <img src="https://picsum.photos/40/40?random=1" alt="Electronics icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
        <span class="font-semibold">Electronics</span>
        <span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(120k listings)</span>
      </a>
      <a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 border-b border-white/20 dark:border-white/10 last:border-0 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-1">
        <img src="https://picsum.photos/40/40?random=2" alt="Fashion icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
        <span class="font-semibold">Fashion & Apparel</span>
        <span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(95k listings)</span>
      </a>
      <a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 border-b border-white/20 dark:border-white/10 last:border-0 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-2">
        <img src="https://picsum.photos/40/40?random=3" alt="Home icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
        <span class="font-semibold">Home & Garden</span>
        <span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(78k listings)</span>
      </a>
      <a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 border-b border-white/20 dark:border-white/10 last:border-0 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-3">
        <img src="https://picsum.photos/40/40?random=4" alt="Art icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
        <span class="font-semibold">Art & Collectibles</span>
        <span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(55k listings)</span>
      </a>
      <a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-4">
        <img src="https://picsum.photos/40/40?random=5" alt="Sports icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
        <span class="font-semibold">Sports & Outdoors</span>
        <span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(42k listings)</span>
      </a>

      <!-- Call to Action -->
      <div class="border-t-2 border-dotted border-white/50 dark:border-white/30 pt-4 px-4 pb-2 mt-4 text-center" role="none">
        <a href="#" class="inline-flex items-center justify-center w-full px-5 py-3 border-4 border-lime-400 dark:border-lime-500 rounded-full shadow-md font-bold text-lg bg-cyan-400 text-teal-900 hover:bg-cyan-500 hover:text-teal-800 focus:outline-none focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-600 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 sm:text-base md:text-lg">
          <svg class="w-6 h-6 mr-2" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
          View All Categories
        </a>
      </div>
    </div>
  </div>
</div>

Menú desplegable Art Deco

Un componente de menú desplegable simple y receptivo con un estilo de diseño Art Deco y una paleta de colores retro / vintage, adecuado para empresas manufactureras / industriales. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="font-sans relative inline-block text-left group">
  <button class="relative z-10 p-4 min-w-[120px] bg-slate-200 text-slate-800 font-medium tracking-wide border-b-4 border-amber-600 shadow-md transition-all duration-300 ease-in-out
                   dark:bg-slate-700 dark:text-slate-200 dark:border-blue-300
                   hover:bg-amber-300 hover:text-slate-900 hover:shadow-lg dark:hover:bg-blue-600 dark:hover:text-white
                   focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-blue-400 dark:focus:ring-offset-slate-800">
    <span class="flex items-center justify-between">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </span>
    <div class="absolute inset-0 border-t-4 border-l-4 border-gray-400 opacity-0 group-hover:opacity-100 group-hover:translate-x-1 group-hover:translate-y-1 transition-all duration-300 ease-in-out dark:border-gray-600"></div>
    <div class="absolute inset-0 border-r-4 border-b-4 border-gray-400 opacity-0 group-hover:opacity-100 group-hover:-translate-x-1 group-hover:-translate-y-1 transition-all duration-300 ease-in-out dark:border-gray-600"></div>
  </button>

  <div class="absolute right-0 mt-2 w-56 origin-top-right rounded-md shadow-lg
              bg-slate-100 ring-1 ring-black ring-opacity-5 focus:outline-none opacity-0 invisible
              group-hover:opacity-100 group-hover:visible translate-y-2 group-hover:translate-y-0 transition-all duration-300 ease-in-out transform
              dark:bg-slate-800 dark:ring-white dark:ring-opacity-10">
    <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
      <a href="#" class="block px-4 py-3 text-sm text-slate-700 font-medium
                        hover:bg-amber-200 hover:text-slate-900
                        dark:text-slate-300 dark:hover:bg-blue-700 dark:hover:text-white"
         role="menuitem" tabindex="-1" id="menu-item-0">Production</a>
      <a href="#" class="block px-4 py-3 text-sm text-slate-700 font-medium
                        hover:bg-amber-200 hover:text-slate-900
                        dark:text-slate-300 dark:hover:bg-blue-700 dark:hover:text-white"
         role="menuitem" tabindex="-1" id="menu-item-1">Inventory</a>
      <a href="#" class="block px-4 py-3 text-sm text-slate-700 font-medium
                        hover:bg-amber-200 hover:text-slate-900
                        dark:text-slate-300 dark:hover:bg-blue-700 dark:hover:text-white"
         role="menuitem" tabindex="-1" id="menu-item-2">Logistics</a>
      <a href="#" class="block px-4 py-3 text-sm text-slate-700 font-medium
                        hover:bg-amber-200 hover:text-slate-900
                        dark:text-slate-300 dark:hover:bg-blue-700 dark:hover:text-white"
         role="menuitem" tabindex="-1" id="menu-item-3">Maintenance</a>
    </div>
  </div>
</div>

Menú desplegable del modo oscuro de Cyberpunk

Un componente de menú desplegable complejo de temática cyberpunk para un tablero, con fondos oscuros, colores en escala de grises con sutiles acentos brillantes y capacidad de respuesta completa.

Abrir Vista previa

                <div class="relative inline-block text-left font-mono z-50">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-700 dark:border-gray-600 shadow-sm px-4 py-2 bg-gradient-to-br from-gray-900 to-black dark:from-gray-800 dark:to-gray-900 text-sm font-medium text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500 transition-all duration-300 ease-in-out group" id="menu-button" aria-expanded="true" aria-haspopup="true">
      <span class="h-4 w-4 mr-2 text-blue-400 group-hover:text-blue-300 transition-colors duration-200">&#9679;</span>
      Dashboard Filters
      <svg class="-mr-1 ml-2 h-5 w-5 text-gray-500 dark:text-gray-400 group-hover:text-gray-300 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <!-- Dropdown menu, show/hide based on menu state. -->
  <div class="origin-top-right absolute right-0 mt-2 w-56 sm:w-64 md:w-72 lg:w-80 rounded-md shadow-lg bg-gradient-to-br from-gray-950 to-black dark:from-gray-900 dark:to-gray-950 ring-1 ring-inset ring-gray-700 dark:ring-gray-800 focus:outline-none transform scale-y-0 opacity-0 group-focus-within:scale-y-100 group-focus-within:opacity-100 transition-all duration-300 ease-out" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <!-- Search/Filter Input -->
      <div class="px-4 py-2">
        <input type="text" placeholder="Search options..." class="w-full px-3 py-2 text-sm bg-gray-800 dark:bg-gray-800 border border-gray-700 dark:border-gray-700 rounded-md text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-500 transition-colors duration-200" />
      </div>

      <!-- Section Header -->
      <div class="px-4 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider border-b border-gray-800 dark:border-gray-800">Data Streams</div>

      <!-- Menu Items - Checkboxes -->
      <div class="py-1">
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500" checked>
          <span class="ml-2 font-light">Real-time Metrics</span>
        </label>
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500">
          <span class="ml-2 font-light">Historical Logs</span>
        </label>
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500" checked>
          <span class="ml-2 font-light">System Alerts</span>
        </label>
      </div>

      <!-- Divider -->
      <div class="border-t border-gray-800 dark:border-gray-800 my-1"></div>

      <!-- Section Header -->
      <div class="px-4 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider border-b border-gray-800 dark:border-gray-800">Time Range</div>

      <!-- Menu Items - Radio Buttons (simulated) -->
      <div class="py-1">
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="radio" name="time-range" class="form-radio h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded-full focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500" checked>
          <span class="ml-2 font-light">Last Hour</span>
        </label>
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="radio" name="time-range" class="form-radio h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded-full focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500">
          <span class="ml-2 font-light">Last 24 Hours</span>
        </label>
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="radio" name="time-range" class="form-radio h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded-full focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500">
          <span class="ml-2 font-light">Last 7 Days</span>
        </label>
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="radio" name="time-range" class="form-radio h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded-full focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500">
          <span class="ml-2 font-light">Custom Range...</span>
        </label>
      </div>

      <!-- Divider -->
      <div class="border-t border-gray-800 dark:border-gray-800 my-1"></div>

      <!-- Action Buttons -->
      <div class="py-1 px-4 flex justify-between space-x-2" role="none">
        <button class="w-full inline-flex justify-center rounded-md border border-gray-700 dark:border-gray-600 shadow-sm px-4 py-2 bg-gray-800 dark:bg-gray-700 text-sm font-medium text-gray-300 dark:text-gray-200 hover:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500 transition-colors duration-200">Reset</button>
        <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500 transition-colors duration-200">Apply</button>
      </div>
    </div>
  </div>
</div>

Componente de menú desplegable

Un menú desplegable simple y receptivo con un diseño 3D en tonos tierra, adecuado para blogs o sitios de contenido. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="relative inline-block text-left font-sans">
  <button id="dropdownButton" class="inline-flex justify-center w-full rounded-md px-4 py-2 text-sm font-medium focus:outline-none focus:ring-2 transform transition-all duration-300 ease-in-out
    bg-emerald-700 text-amber-50 shadow-lg
    dark:bg-stone-800 dark:text-stone-100
    hover:scale-105 hover:shadow-xl
    focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-emerald-100
    dark:focus:ring-stone-600 dark:focus:ring-offset-stone-900
    active:scale-95 active:shadow-md
    border-b-4 border-r-4 border-emerald-900 dark:border-stone-900
    hover:border-b-emerald-800 hover:border-r-emerald-800
    dark:hover:border-b-stone-700 dark:hover:border-r-stone-700
    ">
    Options
    <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
    </svg>
  </button>

  <!-- Dropdown panel, show/hide based on button click. -->
  <div id="dropdownMenu" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none transform scale-y-0 opacity-0 transition-all duration-300 ease-in-out
    bg-amber-100
    dark:bg-stone-700
    border-b-4 border-r-4 border-amber-300 dark:border-stone-800
    " role="menu" aria-orientation="vertical" aria-labelledby="dropdownButton" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="block px-4 py-2 text-sm
        text-emerald-800 hover:bg-emerald-100 hover:text-emerald-900
        dark:text-stone-100 dark:hover:bg-stone-600 dark:hover:text-stone-50
        border-l-4 border-transparent hover:border-emerald-600 dark:hover:border-stone-500
        transition-all duration-200 ease-in-out
        " role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
      <a href="#" class="block px-4 py-2 text-sm
        text-emerald-800 hover:bg-emerald-100 hover:text-emerald-900
        dark:text-stone-100 dark:hover:bg-stone-600 dark:hover:text-stone-50
        border-l-4 border-transparent hover:border-emerald-600 dark:hover:border-stone-500
        transition-all duration-200 ease-in-out
        " role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
      <a href="#" class="block px-4 py-2 text-sm
        text-emerald-800 hover:bg-emerald-100 hover:text-emerald-900
        dark:text-stone-100 dark:hover:bg-stone-600 dark:hover:text-stone-50
        border-l-4 border-transparent hover:border-emerald-600 dark:hover:border-stone-500
        transition-all duration-200 ease-in-out
        " role="menuitem" tabindex="-1" id="menu-item-2">License</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="block w-full text-left px-4 py-2 text-sm
          text-emerald-800 hover:bg-emerald-100 hover:text-emerald-900
          dark:text-stone-100 dark:hover:bg-stone-600 dark:hover:text-stone-50
          border-l-4 border-transparent hover:border-emerald-600 dark:hover:border-stone-500
          transition-all duration-200 ease-in-out
          " role="menuitem" tabindex="-1" id="menu-item-3">Sign out</button>
      </form>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const dropdownButton = document.getElementById('dropdownButton');
    const dropdownMenu = document.getElementById('dropdownMenu');

    function toggleDropdown() {
      if (dropdownMenu.classList.contains('scale-y-0')) {
        dropdownMenu.classList.remove('scale-y-0', 'opacity-0');
        dropdownMenu.classList.add('scale-y-100', 'opacity-100');
      } else {
        dropdownMenu.classList.remove('scale-y-100', 'opacity-100');
        dropdownMenu.classList.add('scale-y-0', 'opacity-0');
      }
    }

    dropdownButton.addEventListener('click', toggleDropdown);

    // Close the dropdown if the user clicks outside of it
    document.addEventListener('click', (event) => {
      if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
        if (dropdownMenu.classList.contains('scale-y-100')) {
          toggleDropdown();
        }
      }
    });

    // Optional: Close on Escape key
    document.addEventListener('keydown', (event) => {
      if (event.key === 'Escape' && dropdownMenu.classList.contains('scale-y-100')) {
        toggleDropdown();
      }
    });
  });
</script>

Componente de menú desplegable

Un componente de menú desplegable inspirado en Material Design adecuado para un portafolio, con colores análogos, capacidad de respuesta y compatibilidad con el modo oscuro mediante Tailwind CSS.

Abrir Vista previa

                <div class="relative w-full md:w-64">
  <button class="flex items-center justify-between w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100" id="options-menu" aria-haspopup="true" aria-expanded="true">
    <span>Options</span>
    <svg class="w-5 h-5 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
    </svg>
  </button>

  <div class="absolute right-0 w-full mt-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 dark:bg-gray-800 hidden" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">Account settings</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">Support</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">License</a>
      <form method="POST" action="#">
        <button type="submit" class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">Sign out</button>
      </form>
    </div>
  </div>
</div>

Componente de menú desplegable

Un componente de menú desplegable simple de estilo glassmorphism para comercio electrónico, con un diseño receptivo y soporte para modo oscuro.

Abrir Vista previa

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white/30 text-sm font-medium text-gray-700 hover:bg-white/40 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-800/30 dark:text-gray-200 dark:hover:bg-gray-700/40 dark:border-gray-700 backdrop-filter backdrop-blur-lg" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white/30 ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-0">Category 1</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-1">Category 2</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-2">Category 3</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-3">View All</button>
      </form>
    </div>
  </div>
</div>

Componente de menú desplegable

Componente de menú desplegable para comercio electrónico con diseño de materiales, combinación de colores análoga e interacciones complejas utilizando Tailwind CSS. Es responsivo y admite el tema oscuro sin JavaScript.

Abrir Vista previa

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-700" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-2">License</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-3">Sign out</button>
      </form>
    </div>
  </div>
</div>

Componente de menú desplegable

Un menú desplegable responsivo de estilo 3D para paneles, con esquema de color triádico y compatibilidad con modo oscuro.

Abrir Vista previa

                
<div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md px-4 py-2 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 text-white text-sm font-medium shadow-lg hover:from-blue-600 hover:via-purple-600 hover:to-pink-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transform transition-transform duration-200 active:scale-95 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 dark:hover:from-gray-600 dark:hover:via-gray-700 dark:hover:to-gray-800" id="options-menu" aria-haspopup="true" aria-expanded="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <!-- Dropdown panel, show/hide based on dropdown state. -->
  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 opacity-0 scale-95 transition-all duration-200 ease-out dark:bg-gray-800 dark:ring-gray-700 dark:divide-gray-700"
    role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:text-white dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem">Account settings</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:text-white dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem">Support</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:text-white dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem">License</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:text-white dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem">Sign out</a>
    </div>
  </div>
</div>

<script>
  // This is a placeholder for JavaScript. In a real application, you would toggle the dropdown visibility with JS.
  // For this example, we'll simulate a "hover" effect with Tailwind classes that are normally toggled by JS.
  const dropdownButton = document.getElementById('options-menu');
  const dropdownPanel = dropdownButton.nextElementSibling;

  dropdownButton.addEventListener('mouseover', () => {
    dropdownPanel.classList.remove('opacity-0', 'scale-95');
    dropdownPanel.classList.add('opacity-100', 'scale-100');
  });

  dropdownButton.addEventListener('mouseout', () => {
    dropdownPanel.classList.remove('opacity-100', 'scale-100');
    dropdownPanel.classList.add('opacity-0', 'scale-95');
  });

  dropdownPanel.addEventListener('mouseover', () => {
    dropdownPanel.classList.remove('opacity-0', 'scale-95');
    dropdownPanel.classList.add('opacity-100', 'scale-100');
  });

  dropdownPanel.addEventListener('mouseout', () => {
    dropdownPanel.classList.remove('opacity-100', 'scale-100');
    dropdownPanel.classList.add('opacity-0', 'scale-95');
  });

</script>

Componente de menú desplegable

Componente de menú desplegable con microinteracciones, colores vibrantes y diseño simple para un portafolio, con diseño receptivo y soporte de tema oscuro.

Abrir Vista previa

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700 transition transform hover:scale-105" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-700 hidden" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600 transition duration-150 ease-in-out transform hover:-translate-y-0.5" role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600 transition duration-150 ease-in-out transform hover:-translate-y-0.5" role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600 transition duration-150 ease-in-out transform hover:-translate-y-0.5" role="menuitem" tabindex="-1" id="menu-item-2">License</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600 transition duration-150 ease-in-out transform hover:-translate-y-0.5" role="menuitem" tabindex="-1" id="menu-item-3">
          Sign out
        </button>
      </form>
    </div>
  </div>
</div>

Menú desplegable Neumorphic

Menú desplegable neumórfico para redes sociales con colores vibrantes y compatibilidad con modo oscuro.

Abrir Vista previa

                <div class="relative inline-block text-left">
  <button class="flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-br from-purple-400 to-indigo-600 shadow-neumorphic-light dark:shadow-neumorphic-dark focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
  </button>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-gradient-to-br from-purple-400 to-indigo-600 dark:from-gray-700 dark:to-gray-900 ring-1 ring-black ring-opacity-5 divide-y divide-purple-300 dark:divide-gray-600 focus:outline-none">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-purple-500 hover:text-white dark:text-gray-200 dark:hover:bg-gray-800">Profile</a>
      <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-purple-500 hover:text-white dark:text-gray-200 dark:hover:bg-gray-800">Settings</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-purple-500 hover:text-white dark:text-gray-200 dark:hover:bg-gray-800">Notifications</a>
      <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-purple-500 hover:text-white dark:text-gray-200 dark:hover:bg-gray-800">Messeges</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-purple-500 hover:text-white dark:text-gray-200 dark:hover:bg-gray-800">Logout</a>
    </div>
  </div>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #9d7df5, -6px -6px 12px #c9a7ff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #333333, -6px -6px 12px #666666;
  }
</style>