JSFiddle - React, Tailwind, and code Playground

HTML

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