JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="contain">

<div class="blur" id="blur">
<div class="cheat" id="cheat" onclick="reveal()">
CHEAT!<br>
Click Here to Reveal the Answer
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitor et ante et vehicula. Curabitur faucibus eleifend magna sed fermentum. Sed vehicula sodales consequat. Pellentesque ac lacus quis risus dapibus ultricies eget sed risus. Nulla feugiat vel leo eget sodales. Nulla consequat commodo fermentum. Nam elementum vitae nisi nec bibendum. Donec sed erat libero.


</div>

</div>

CSS

.contain {max-width:800px;margin:auto;}

.blur {border:1px solid #0066CA;padding:5px;color: transparent;text-shadow: 0 0 5px rgba(0,0,0,0.5);position:relative;}
.blur2 {border:1px solid #0066CA;padding:5px;color: #000;text-shadow: none;}  
.cheat {position:absolute;color:#fff;text-shadow: none;background-color:#0066CA;text-align:center;padding:10px 15px;border-radius:5px;left:50%;transform: translate(-50%, 0);}

JavaScript

function reveal() {
document.getElementById("cheat").style.display = "none";
document.getElementById("blur").className = "blur2";
}