Componentes Menú desplegable Menú desplegable de blog retro

Menú desplegable de blog retro

Un menú desplegable retro-vintage responsivo para el contenido del blog. Cuenta con un esquema de color triádico simple y compatibilidad con el modo oscuro mediante Tailwind CSS. Sin JavaScript.

Vista previa

Código HTML

<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-offset-gray-100 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:ring-offset-gray-800 dark:focus:ring-blue-600" 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>

  <!--
    Dropdown menu, show/hide based on menu state.

    Entering: "transition ease-out duration-100"
      From: "transform opacity-0 scale-95"
      To: "transform opacity-100 scale-100"
    Leaving: "transition ease-in duration-75"
      From: "transform opacity-100 scale-100"
      To: "transform opacity-0 scale-95"
  -->
  <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 dark:text-gray-200 dark:hover:bg-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm dark:text-gray-200 dark:hover:bg-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm dark:text-gray-200 dark:hover:bg-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-2">License</a>
    </div>
  </div>
</div>

Componentes relacionados

RetroGamingMenú desplegable

Un componente de menú desplegable receptivo, de temática retro/vintage con un esquema de color apagado, adecuado para sitios web de juegos, con soporte para modo oscuro.

Abrir

Menú desplegable Neumorphic

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

Abrir

Componente de menú desplegable

Un componente de menú desplegable responsivo diseñado con los principios de Material Design utilizando Tailwind CSS, compatible con el modo oscuro e incluyendo imágenes de marcador de posición.

Abrir