Componente - Dropdown con Tailwind CSS

Alexk · 22 Ene 2025

Quiero compartir estos dos componentes para crear un dropdown con Tailwind CSS, es muy sencillo la primera opción usamos la etiqueta <label> y así poder hacer uso de la pseudo-clase :focus-within para saber cuándo le hayan dado click y tenga el "focus" el contenedor y luego mostrar nuestro dropdown oculto; la segunda opción usaremos la etiqueta <details> y <summary> simulando un acordeón, ambas opciones "validas" pero poco ortodoxas para los más puristas que prefieren javascript para un mayor control de sus componentes para sitios grandes... hay otras opciones como usar <label> y un <input type="checkbox"> (esta ultima la usaba el mismo amazon prime video antes de su rediseño) siempre hay muchas maneras de hacer cualquier cosa, correcta o incorrecta solo ustedes deciden 😎.

Usando la etiqueta <label>

HTML:

<div id="AA" class="min-h-screen bg-white text-slate-500 dark:bg-slate-950 dark:text-slate-400">
  <header role="banner" class="border-b border-slate-200 bg-white/90 dark:border-slate-800 dark:bg-slate-950/90">
    <div class="flex items-center justify-between gap-4 px-6 py-4">
      <figure>
        <a href="https://twitter.com/alexkaguiar" aria-label="Follow me"
          ><svg class="h-12 w-12 text-indigo-500 dark:text-indigo-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48"><path fill="currentColor" d="M23.95 48L17.99 18.013 0 12.017 11.992 0l-3 9.008 11.999 3.003 3 3.003 3-3.003 11.998-3.003-3-9.008L48 12.011l-18.01 6.006L23.947 48h.003z" /></svg
        ></a>
      </figure>
      <div class="flex items-center gap-2">
        <div class="group relative">
          <label tabindex="0" class="inline-flex cursor-pointer select-none items-center gap-3 rounded-full p-2 pe-4 text-start text-slate-700 group-focus-within:pointer-events-none dark:text-slate-200" role="button">
            <span class="relative">
              <img class="h-8 w-8 rounded-full object-cover" width="128" height="128" src="https://randomuser.me/api/portraits/men/46.jpg" alt="duncan" />
              <span class="absolute bottom-0 end-0 h-2 w-2 rounded-full bg-green-500 ring-2 ring-white dark:ring-slate-950"></span>
            </span>
            <span class="me-1 hidden flex-col text-sm font-bold leading-4 sm:flex">Duncan MacLeod <span class="text-xs font-normal text-slate-500 dark:text-slate-400">Administrator</span></span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-3 w-3 group-focus-within:rotate-180"><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z" clip-rule="evenodd" /></svg>
          </label>
          <ul tabindex="0" class="absolute end-0 top-full z-50 mt-1 hidden w-56 flex-col gap-2 rounded-lg border border-slate-200 bg-white bg-opacity-90 p-2 group-focus-within:flex dark:border-slate-800 dark:bg-slate-900">
            <li>
              <a class="group/a flex w-full items-center gap-3 rounded-md px-3 py-2 text-slate-600 hover:bg-indigo-500/10 hover:text-indigo-500 dark:text-slate-400 dark:hover:bg-indigo-400/10 dark:hover:text-indigo-400" href="#"
                ><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-5 w-5 opacity-60 group-hover/a:opacity-100"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg> My Account</a
              >
            </li>
            <li>
              <a class="group/a flex w-full items-center gap-3 rounded-md px-3 py-2 text-slate-600 hover:bg-indigo-500/10 hover:text-indigo-500 dark:text-slate-400 dark:hover:bg-indigo-400/10 dark:hover:text-indigo-400" href="#"
                ><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-5 w-5 opacity-60 group-hover/a:opacity-100">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                Settings</a
              >
            </li>
            <li>
              <a class="group/a flex w-full items-center gap-3 rounded-md px-3 py-2 text-slate-600 hover:bg-indigo-500/10 hover:text-indigo-500 dark:text-slate-400 dark:hover:bg-indigo-400/10 dark:hover:text-indigo-400" href="#"
                ><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-5 w-5 opacity-60 group-hover/a:opacity-100"><path stroke-linecap="round" stroke-linejoin="round" d="M16.712 4.33a9.027 9.027 0 011.652 1.306c.51.51.944 1.064 1.306 1.652M16.712 4.33l-3.448 4.138m3.448-4.138a9.014 9.014 0 00-9.424 0M19.67 7.288l-4.138 3.448m4.138-3.448a9.014 9.014 0 010 9.424m-4.138-5.976a3.736 3.736 0 00-.88-1.388 3.737 3.737 0 00-1.388-.88m2.268 2.268a3.765 3.765 0 010 2.528m-2.268-4.796a3.765 3.765 0 00-2.528 0m4.796 4.796c-.181.506-.475.982-.88 1.388a3.736 3.736 0 01-1.388.88m2.268-2.268l4.138 3.448m0 0a9.027 9.027 0 01-1.306 1.652c-.51.51-1.064.944-1.652 1.306m0 0l-3.448-4.138m3.448 4.138a9.014 9.014 0 01-9.424 0m5.976-4.138a3.765 3.765 0 01-2.528 0m0 0a3.736 3.736 0 01-1.388-.88 3.737 3.737 0 01-.88-1.388m2.268 2.268L7.288 19.67m0 0a9.024 9.024 0 01-1.652-1.306 9.027 9.027 0 01-1.306-1.652m0 0l4.138-3.448M4.33 16.712a9.014 9.014 0 010-9.424m4.138 5.976a3.765 3.765 0 010-2.528m0 0c.181-.506.475-.982.88-1.388a3.736 3.736 0 011.388-.88m-2.268 2.268L4.33 7.288m6.406 1.18L7.288 4.33m0 0a9.024 9.024 0 00-1.652 1.306A9.025 9.025 0 004.33 7.288" /></svg> Support</a
              >
            </li>
            <li>
              <button class="group/a flex w-full items-center gap-3 rounded-md px-3 py-2 text-slate-600 hover:bg-indigo-500/10 hover:text-indigo-500 dark:text-slate-400 dark:hover:bg-indigo-400/10 dark:hover:text-indigo-400" type="button" aria-label="dark/light mode" id="btn-dark">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-5 w-5 opacity-60 group-hover/a:opacity-100 dark:hidden"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" /></svg>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="hidden h-5 w-5 opacity-60 group-hover/a:opacity-100 dark:block"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" /></svg>
                <span class="dark:hidden">Dark</span>
                <span class="hidden dark:block">Light</span>
              </button>
            </li>
            <li class="-mx-2 h-px bg-slate-200 dark:bg-slate-800" aria-hidden="true"></li>
            <li>
              <a class="group/a flex w-full items-center gap-3 rounded-md px-3 py-2 text-slate-600 hover:bg-indigo-500/10 hover:text-indigo-500 dark:text-slate-400 dark:hover:bg-indigo-400/10 dark:hover:text-indigo-400" href="#"
                ><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-5 w-5 opacity-60 group-hover/a:opacity-100"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" /></svg> Sign out</a
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
  </header>
</div>

Botton para cambiar el tema claro/oscuro:

JavaScript:

//dark mode
const darkModeToggle = document.getElementById('btn-dark');
const body = document.body;

darkModeToggle.addEventListener('click', () => {
  body.classList.toggle('dark');
});

Demo:

Usando la etiqueta HTML <details>

HTML:

<div id="AA" class="min-h-screen bg-white text-slate-500 dark:bg-slate-950 dark:text-slate-400">
        <header role="banner" class="bg-white/90 border-b border-slate-200 dark:bg-slate-950/90 dark:border-slate-800">
            <div class="py-4 px-6 flex justify-between items-center gap-4">
                <figure><a href="https://twitter.com/alexkaguiar" aria-label="Follow me"><svg class="w-12 h-12 text-indigo-500 dark:text-indigo-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48"><path fill="currentColor" d="M23.95 48L17.99 18.013 0 12.017 11.992 0l-3 9.008 11.999 3.003 3 3.003 3-3.003 11.998-3.003-3-9.008L48 12.011l-18.01 6.006L23.947 48h.003z"/></svg></a></figure>
                <div class="flex gap-2 items-center">
                    <details class="relative group">
                        <summary class="inline-flex items-center gap-3 p-2 pe-4 cursor-pointer rounded-full select-none text-slate-700 dark:text-slate-200">
                            <span class="relative">
                                <img class="w-8 h-8 rounded-full object-cover" width="128" height="128" src="https://randomuser.me/api/portraits/men/46.jpg" alt="duncan">
                                <span class="w-2 h-2 ring-2 ring-white dark:ring-slate-950 bg-green-500 rounded-full absolute end-0 bottom-0"></span>
                            </span>
                            <span class="me-1 font-bold text-sm flex-col leading-4 hidden sm:flex">Duncan MacLeod <span class="font-normal text-xs text-slate-500 dark:text-slate-400">Administrator</span></span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3 h-3 group-open:rotate-180"><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z" clip-rule="evenodd" /></svg>
                            <!-- fix - close on click outside -->
                            <span class="fixed inset-0 z-40 invisible group-open:visible"></span>
                        </summary>
                        <ul class="absolute top-full end-0 mt-1 w-56 p-2 rounded-lg z-50 flex flex-col gap-2 border border-slate-200 bg-white bg-opacity-90 dark:bg-slate-900 dark:border-slate-800">
                            <li>
                                <a class="px-3 py-2 rounded-md w-full flex items-center gap-3 group/a text-slate-600 hover:text-indigo-500 hover:bg-indigo-500/10 dark:text-slate-400 dark:hover:text-indigo-400 dark:hover:bg-indigo-400/10" href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="w-5 h-5 opacity-60 group-hover/a:opacity-100"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg> My Account</a>
                            </li>
                            <li>
                                <a class="px-3 py-2 rounded-md w-full flex items-center gap-3 group/a text-slate-600 hover:text-indigo-500 hover:bg-indigo-500/10 dark:text-slate-400 dark:hover:text-indigo-400 dark:hover:bg-indigo-400/10" href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="w-5 h-5 opacity-60 group-hover/a:opacity-100"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg> Settings</a>
                            </li>
                            <li>
                                <a class="px-3 py-2 rounded-md w-full flex items-center gap-3 group/a text-slate-600 hover:text-indigo-500 hover:bg-indigo-500/10 dark:text-slate-400 dark:hover:text-indigo-400 dark:hover:bg-indigo-400/10" href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="w-5 h-5 opacity-60 group-hover/a:opacity-100"><path stroke-linecap="round" stroke-linejoin="round" d="M16.712 4.33a9.027 9.027 0 011.652 1.306c.51.51.944 1.064 1.306 1.652M16.712 4.33l-3.448 4.138m3.448-4.138a9.014 9.014 0 00-9.424 0M19.67 7.288l-4.138 3.448m4.138-3.448a9.014 9.014 0 010 9.424m-4.138-5.976a3.736 3.736 0 00-.88-1.388 3.737 3.737 0 00-1.388-.88m2.268 2.268a3.765 3.765 0 010 2.528m-2.268-4.796a3.765 3.765 0 00-2.528 0m4.796 4.796c-.181.506-.475.982-.88 1.388a3.736 3.736 0 01-1.388.88m2.268-2.268l4.138 3.448m0 0a9.027 9.027 0 01-1.306 1.652c-.51.51-1.064.944-1.652 1.306m0 0l-3.448-4.138m3.448 4.138a9.014 9.014 0 01-9.424 0m5.976-4.138a3.765 3.765 0 01-2.528 0m0 0a3.736 3.736 0 01-1.388-.88 3.737 3.737 0 01-.88-1.388m2.268 2.268L7.288 19.67m0 0a9.024 9.024 0 01-1.652-1.306 9.027 9.027 0 01-1.306-1.652m0 0l4.138-3.448M4.33 16.712a9.014 9.014 0 010-9.424m4.138 5.976a3.765 3.765 0 010-2.528m0 0c.181-.506.475-.982.88-1.388a3.736 3.736 0 011.388-.88m-2.268 2.268L4.33 7.288m6.406 1.18L7.288 4.33m0 0a9.024 9.024 0 00-1.652 1.306A9.025 9.025 0 004.33 7.288" /></svg> Support</a>
                            </li>
                            <li>
                                <button class="px-3 py-2 rounded-md w-full flex items-center gap-3 group/a text-slate-600 hover:text-indigo-500 hover:bg-indigo-500/10 dark:text-slate-400 dark:hover:text-indigo-400 dark:hover:bg-indigo-400/10" type="button" aria-label="dark/light mode" id="btn-dark">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="w-5 h-5 opacity-60 group-hover/a:opacity-100 dark:hidden"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" /></svg>
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="w-5 h-5 opacity-60 group-hover/a:opacity-100 hidden dark:block"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" /></svg>
                                    <span class="dark:hidden">Dark</span>
                                    <span class="hidden dark:block">Light</span>
                                </button>
                            </li>
                            <li class="h-px -mx-2 bg-slate-200 dark:bg-slate-800" aria-hidden="true"></li>
                            <li>
                                <a class="px-3 py-2 rounded-md w-full flex items-center gap-3 group/a text-slate-600 hover:text-indigo-500 hover:bg-indigo-500/10 dark:text-slate-400 dark:hover:text-indigo-400 dark:hover:bg-indigo-400/10" href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="w-5 h-5 opacity-60 group-hover/a:opacity-100"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" /></svg> Sign out</a>
                            </li>
                        </ul>
                    </details>
                </div>
            </div>
        </header>
    </div>

Usamos el mismo javascript para el modo claro/oscuro.

Demo:

Componente - Dropdown con Tailwind CSS

Alexk