JSFiddle - React, Tailwind, and code Playground

HTML

<div class="clickable"><span class="red">I'm red</span>This is normal div with <span class="green">color</span> and clickable</div>
<br>
<div class="clickable grayscale"><span class="red">I'm red but now gray</span>This is same DIV with all <span class="green">colors</span> but now gray</div>
<br>
<div class="not-clickable grayscale"><div class="overlay"></div><span class="red">I'm red</span>This is same DIV with all <span class="green">colors</span> but now gray and now <span class="red">you cant click on it</span> </div>

CSS

.red{
  color: red;
}
.green{
  color: green;
}
.orange{
  color: orange;
}
.grayscale { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
  }
 .clickable{
   border: 2px solid green;
 }
.not-clickable{
  position: relative;
  border: 2px solid blue;
}
.not-clickable .overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index:1;
}