JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box-1">
    <a href="#">test 1</a> <br />
    <a href="#">test 2</a> <br />
    <a href="#">test 3</a> <br />
    <a href="#">test 4</a> <br />
</div>
<div id="box-2">
</div>

CSS

a {
  color:#b43ec6;            
}

a:hover {
  background:#cccccc;
}

#box-1 {

}

#box-2 {
    position: absolute;
    top: 0;
    left: 0;
    height:200px;
    width:300px;
    background: red;
    opacity: 0.5;
    pointer-events: none;
}