JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="spacer"></div>

<p>This is some text and a <a href="#">link</a></p>
<p>This is some text and a <a href="#">link</a></p>
<p>This is some text and a <a href="#">link</a></p>
<p>This is some text and a <a href="#">link</a></p>
<p>This is some text and a <a href="#">link</a></p>
<p>This is some text and a <a href="#">link</a></p>

<div class="overlay"></div>

CSS

.overlay {
position:fixed;top:0;left:0;width:100%;height:100%;
background: url(http://www.hloe.co.uk/overlayb.png);
background-repeat: no-repeat;
background-size: 100% 100%;
opacity:0.2;
pointer-events:none;
}

@media only screen and (max-width: 768px) {
.overlay {display:none;}
}


  
.spacer {height:800px;}