Menu déroulant

Menu déroulant du blog rétro

Un menu déroulant rétro-vintage réactif pour le contenu du blog. Dispose d’un schéma de couleurs triadique simple et d’une prise en charge du mode sombre à l’aide de Tailwind CSS. Pas de JavaScript.

Ouvrir l’aperçu

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

Un composant de menu déroulant de style brutaliste en niveaux de gris, adapté aux sites Web d’entreprise. Dispose d’une interface complexe et multi-éléments avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <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-black dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 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 dark:text-gray-300 dark:hover:bg-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-0">
        <div class="flex items-center">
          <img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
          <span>Account Settings</span>
        </div>
      </a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm dark:text-gray-300 dark:hover:bg-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-1">
         <div class="flex items-center">
          <img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="">
          <span>Support</span>
        </div>
      </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 dark:text-gray-300 dark:hover:bg-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-2">
           <div class="flex items-center">
            <svg class="h-4 w-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
            </svg>
            <span>Sign out</span>
          </div>
        </button>
      </form>
    </div>
  </div>
</div>

Composant de menu déroulant

Un menu déroulant réactif avec prise en charge des micro-interactions et du thème sombre construit avec Tailwind CSS.

Ouvrir l’aperçu

                <div class="relative w-64">
    <!-- Dropdown Button -->
    <button class="bg-gray-800 text-white font-semibold py-2 px-4 rounded inline-flex items-center focus:outline-none focus:ring-2 focus:ring-white">
        <span>Dropdown</span>
        <svg class="ml-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 10l5 5 5-5" />
        </svg>
    </button>

    <!-- Dropdown Menu -->
    <div class="absolute w-full bg-gray-700 rounded-md mt-1 shadow-lg z-10 hidden group-hover:block transition-all ease-in-out duration-200 transform origin-top scale-y-0 group-hover:scale-y-100">
        <div class="py-1">
            <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-300 hover:bg-gray-600 hover:text-white transition-colors duration-150">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                Profile
            </a>
            <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-300 hover:bg-gray-600 hover:text-white transition-colors duration-150">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
                Settings
            </a>
            <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-300 hover:bg-gray-600 hover:text-white transition-colors duration-150">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
                Logout
            </a>
        </div>
    </div>
</div>

<style>
    /* Dark Mode Support */
    @media (prefers-color-scheme: dark) {
        .bg-gray-700 { background-color: #374151; }
        .text-gray-300 { color: #D1D5DB; }
        .hover\:bg-gray-600:hover { background-color: #4B5563; }
    }
</style>

Composant de menu déroulant

Un composant de menu déroulant conçu avec le style Glassmorphism, avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <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 dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" 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.23 7.21a.75.75 0 011.06 0L10 10.293l3.71-3.07a.75.75 0 011.07 1.04l-4.5 4.5a.75.75 0 01-1.06 0l-4.5-4.5a.75.75 0 010-1.06z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="z-10 hidden origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1" role="none">
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full mr-2">
        Account Settings
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full mr-2">
        Support
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full mr-2">
        License
      </a>
      <div class="border-t border-gray-200 dark:border-gray-700"></div>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full mr-2">
        Logout
      </a>
    </div>
  </div>
</div>

<style>
  .bg-glass {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 8px;
  }
  .dark .bg-glass {
    background: rgba(31, 41, 55, 0.4);
  }
</style>

Composant de menu déroulant

Composant de menu déroulant réactif conçu selon les principes de Material Design à l’aide de Tailwind CSS, prenant en charge le mode sombre et incluant des images de repère d’emplacement.

Ouvrir l’aperçu

                <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-indigo-500 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700" aria-haspopup="true" aria-expanded="true" aria-controls="options">
      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.23 7.21a.75.75 0 011.06 0l3.47 3.47 3.47-3.47a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0l-4.24-4.24a.75.75 0 010-1.06z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="absolute z-10 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">
        Profile
      </a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">
        Account
      </a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">
        Dashboard
      </a>
      <div class="border-t border-gray-100 dark:border-gray-700"></div>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">
        Logout
      </a>
    </div>
  </div>
</div>

<div class="hidden md:flex md:items-center">
  <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="h-10 w-10 rounded-full shadow-lg" />
  <span class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-200">User Name</span>
</div>

Composant de menu déroulant

Un composant de menu déroulant réactif conçu avec des micro-interactions et la prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="relative inline-block text-left">
  <div>
    <button class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
      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.23 7.21a.75.75 0 011.06 0L10 10.39l3.71-3.18a.75.75 0 111 1.12l-4.25 3.5a.75.75 0 01-1 0l-4.25-3.5a.75.75 0 010-1.12z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="dropdown-content origin-top-right absolute left-0 z-10 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none transition ease-out duration-100 transform scale-95 opacity-0">
    <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-150 ease-in-out" role="menuitem">
        <img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" />
        Profile
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-150 ease-in-out" role="menuitem">
        <img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" />
        My Account
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-150 ease-in-out" role="menuitem">
        <img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" />
        Log out
      </a>
    </div>
  </div>
</div>

<style>
  [data-theme="dark"] .dropdown-content {
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  }
  .dropdown-content:hover {
    opacity: 1;
    transform: scale(1);
  }
</style>

Composant de menu déroulant

Un menu déroulant réactif avec un design Glassmorphism utilisant Tailwind CSS, prenant en charge le mode sombre et présentant des effets d’arrière-plan flous.

Ouvrir l’aperçu

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-opacity-30 bg-white dark:bg-opacity-30 dark:bg-gray-800 hover:bg-opacity-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" 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>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">Profile</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">Settings</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">Logout</a>
    </div>
  </div>
</div>

<style>
  .bg-opacity-30 {
    background-color: rgba(255, 255, 255, 0.3) !important;
  }
  .dark .bg-opacity-30 {
    background-color: rgba(55, 65, 81, 0.3) !important;
  }
  .backdrop-blur {
    backdrop-filter: blur(10px);
  }
</style>

<div class="absolute inset-0 rounded-md bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-blur border border-gray-300 dark:border-gray-700">
    <img class="w-full h-full object-cover rounded-md" src="https://picsum.photos/200/100" alt="Placeholder image">
    <div class="absolute inset-0 flex items-center justify-center">
      <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
    </div>
</div>

Menu déroulant Composant 20

Un composant de menu déroulant avec un style de conception brutaliste utilisant Tailwind CSS, avec des effets réactifs et la prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" 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.23 7.21a.75.75 0 011.06-.02L10 10.293l3.71-3.11a.75.75 0 111.01 1.11l-4.25 3.5a.75.75 0 01-1.01 0l-4.25-3.5a.75.75 0 01-.02-1.06z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/40?random=1" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
        Profile
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/40?random=2" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
        Settings
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/40?random=3" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
        Notifications
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/40?random=4" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
        Log out
      </a>
    </div>
  </div>
</div>

<style>
  /* Brutalism styles for dark mode support */
  [class*='bg-'] {
    background-color: #ffffff;
  }
  [class*='text-'] {
    color: #000000;
  }
  .bg-gray-800 {
    background-color: #2d3748;
  }
  .dark .text-gray-300 {
    color: #edf2f7;
  }
  .dark .hover\:bg-gray-700:hover {
    background-color: #4a5568;
  }
</style>

Menu déroulant Composant 5

Composant de menu déroulant réactif conçu pour le mode sombre, utilisant Tailwind CSS pour le style et la mise en page. Le composant présente un design élégant, des effets de survol et la prise en charge des thèmes sombres, garantissant une expérience d’interface utilisateur moderne.

Ouvrir l’aperçu

                <div class="relative inline-block text-left">
  <div>
    <button class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-gray-800 text-sm font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" 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.23 7.21a.75.75 0 011.06 0L10 10.293l3.71-3.09a.75.75 0 111.02 1.1l-4 3.333a.75.75 0 01-1.02 0l-4-3.333a.75.75 0 010-1.1z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="absolute right-0 z-10 mt-2 w-56 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-400 hover:bg-gray-700 hover:text-white" role="menuitem">
        <img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
        Profile
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-400 hover:bg-gray-700 hover:text-white" role="menuitem">
        <img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" />
        Settings
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-400 hover:bg-gray-700 hover:text-white" role="menuitem">
        <img class="h-8 w-8 rounded-full mr-2" src="https://picsum.photos/id/1/200/200" alt="Placeholder" />
        My Images
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-400 hover:bg-gray-700 hover:text-white" role="menuitem">
        <img class="h-8 w-8 rounded-full mr-2" src="https://picsum.photos/id/2/200/200" alt="Placeholder" />
        Logout
      </a>
    </div>
  </div>
</div>

Catégories

Menu déroulant du blog rétro

Brutalisme Menu déroulant

Composant de menu déroulant

Composant de menu déroulant

Composant de menu déroulant

Composant de menu déroulant

Composant de menu déroulant

Menu déroulant Composant 20

Menu déroulant Composant 5