JSFiddle - React, Tailwind, and code Playground

by Kerrick

HTML

<div class="group row">
            <div class="col-1">
              <h3>Works with images:</h3>
              <p>This just in ... kittens are just so ...</p>
              <p><img class="spoiler" src="http://placekitten.com/440/280" /></p>
            </div>
            <div class="col-2">
              <h3>Works with copy:</h3>
              <p>Sharon <spoiler>shoots Adama. It's really tragic. There's so much blood. Haha.</spoiler> Classic Sharon!</p>
              <p>Turns out Jesus <spoiler>dies, but is brought back to life.</spoiler> A twist worthy of M Night Shamamanalayan!</p>
              <p>On the Itchy &amp; Scratchy CD-ROM, is there a way to get out of the dungeon without using the wizard key? <spoiler>You have to find the golden challice and invoke it three times.</spoiler> What the hell are you talking about?</p>
              <p>SPOILER ALERT <spoiler>Everybody dies eventually. I'm not trying to be a pessimist or something, just, value life. Or don't. </spoiler> But at least try to look surprised when you reach the end.</p>
            </div>
          </div>

CSS

.spoiler, spoiler {
    -webkit-filter: blur(8px);
            filter: blur(8px);
}
img.spoiler, spoiler img { /* because images need more blur */
    -webkit-filter: blur(20px);
            filter: blur(20px);
}
.spoiler:hover, spoiler:hover {
    -webkit-filter: blur(3px);
            filter: blur(3px);
    -webkit-transition: 0.3s;
            transition: 0.3s;
}
img.spoiler:hover, spoiler img:hover { /* because images still need more blur */
    -webkit-filter: blur(10px);
            filter: blur(10px);
}
.spoiler:active, spoiler:active {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    -webkit-transition: 0s;
            transition: 0s;
}
img.spoiler:active, spoiler img:active { /* because images still need more blur */
    -webkit-filter: blur(0px);
            filter: blur(0px);
}