JSFiddle - React, Tailwind, and code Playground

by Danilo Metzker

HTML

<div class="list" id="tamanho">
  <div class="label">Tamanho <span></span></div>
  <div class="options">
    <ul>
      <li>P</li>
      <li>M</li>
      <li>GG</li>
    </ul>
  </div>
</div>

<div class="list" id="cor">
  <div class="label">Cor <span></span></div>
  <div class="options">
    <ul>
      <li>P</li>
      <li>M</li>
      <li>GG</li>
    </ul>
  </div>
</div>

SCSS

*{box-sizing: border-box;}

.list{
  position: relative;
  width: 300px;
  
  .label {
    color: #000;
    font-size: 14px;
    padding: 8px 16px;
    border: 1px solid #000;
    width: 100%;
  }

  .options {
    position: absolute;
    top: 100%;
    width: 100%;
    background-color: #fff;
    border: 1px solid #000;
    display: none;
    z-index: 9;

    ul {
      li {
        font-size: 14px;
        padding: 8px 16px;
      }
    }
  }
  
  &.active{
    .options{
      display: block;
    }
  }
}

JavaScript

["tamanho", "cor"].map(id => {
  document.getElementById(id).getElementsByClassName("label")[0].addEventListener("click", (e) =>{
    e.stopPropagation();
    Array.from(document.getElementsByClassName("list")).forEach( el => {
    	if( el != document.getElementById(id) ) el.classList.remove("active");
    });
    
    Array.from(document.getElementById(id).classList).includes("active")
      ? document.getElementById(id).classList.remove("active")
      : document.getElementById(id).classList.add("active")
  });

  document.addEventListener("click", (e) => {
    document.getElementById(id).classList.remove("active");
  });
});


/* Array.from(document.getElementById("tamanho").getElementsByTagName("li")).forEach( el => {
  el.addEventListener("click", (ev) => {
    let text = el.innerHTML;
  });
});
 */