JSFiddle - React, Tailwind, and code Playground

by Sasá Rafalsky

HTML

<nav class="menu-drawer__navigation">
  <ul class="menu-drawer__menu has-submenu list-menu" role="list">
    <li><a id="HeaderDrawer-new" href="/collections/new" class="menu-drawer__menu-item list-menu__item link link--text focus-inset">
        <img src="https://pawclawlab.com/cdn/shop/files/nav-menu-NEW.png" alt="NEW">
        NEW
      </a></li>
    <li>
      <details id="Details-menu-drawer-menu-item-2">
        <summary id="HeaderDrawer-dog" class="menu-drawer__menu-item list-menu__item link link--text focus-inset" role="button" aria-expanded="false" aria-controls="link-dog">
          <img src="https://pawclawlab.com/cdn/shop/files/nav-menu-DOG.png" width="36px">
          DOG
          <svg viewBox="0 0 14 10" fill="none" aria-hidden="true" focusable="false" class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill="currentColor">
            </path>
          </svg>

          <svg aria-hidden="true" focusable="false" class="icon icon-caret" viewBox="0 0 10 6">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor">
            </path>
          </svg>

        </summary>
        <div id="link-dog" class="menu-drawer__submenu has-submenu gradient motion-reduce" tabindex="-1">
          <div class="menu-drawer__inner-submenu">
            <button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true">
              <svg viewBox="0 0 14 10" fill="none" aria-hidden="true" focusable="false" class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793...

CSS

.menu-drawer__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 30px; // Espacio general entre elementos
  padding: 0;
  list-style: none;

  li:nth-child(1) {
    width: 100%;
    position: relative;

    a {
      display: block;
      width: 100%;
      height: 100%;
      text-align: center;
      color: white;
      text-decoration: none;

      img {
        width: 100%;
        height: auto;
        display: block;
      }

      &::after {
        content: attr(id); // Esto añade el texto sobre la imagen
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 2rem; // Tamaño de la fuente, ajusta según sea necesario
        font-weight: bold;
        color: #fff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
      }
    }
  }

  li:nth-child(2),
  li:nth-child(3),
  li:nth-child(4) {
    flex: 1;
    width: calc(100% / 3 - 20px); // Calcula el ancho considerando el espacio
    box-sizing: border-box;

    &:nth-child(2) {
      margin-left: 30px; // Espacio en la izquierda
    }

    &:nth-child(4) {
      margin-right: 30px; // Espacio en la derecha
    }

    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }

  // Mantén el estilo de los demás elementos
  li:nth-child(n+5) {
    flex-basis: auto; // Ajusta según sea necesario para los siguientes elementos
  }
}