JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<div>
<span class="example">
<span class="blur_filter_on">
<span id="hint" style="display:block;">This is</span> the sentence i use as an</span> example.</span>
</div>

<a class=hint href="#" onclick="showHint('hint')">BUTTON</a>

CSS

.example {
  color: #1f2c60;
  font-size: calc(0.7em + 2.3vw);
  
}

.blur_filter_on {
  filter: blur(0.35em);
  
}

blur_filter_off {
  animation-name: blur_decrease;
  animation-timing-function: ease;
  animation-duration: 1s;
}

@keyframes blur_decrease {
from { filter: blur(0.35em); }
to { filter: blur(0); }
}

JavaScript

function showHint(id1) {

  var x = document.getElementById(id1).style;
  x.display = (x.display != "block") ? "block" : "none";

}