JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mascara" style="display: block;"></div>
<div class="user-controls">
  <ul>
    <li><a href="#" id="botao" data-ref=""><img src="#" id="imgluz"></a></li>
  </ul>
</div>

CSS

.mascara{
    position: fixed;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
    width: 100%;
    margin:0;
    padding:0;
    opacity:.80;
    filter: alpha(opacity=80);
    -moz-opacity: 0.80;
    z-index: 1050;
}

#botao {
  position: relative;
  z-index: 1055;
}