JSFiddle - React, Tailwind, and code Playground

HTML

<h1 class="squiggle">Hover over me</h1><br>
<div class="squiggle red">There's a squiggle under me</div> and then there's more stuff here etc etc and so onere's more stuff here etc etc and so onere's more stuff here etc etc and so onere's more stuff here etc etc a<div class='squiggle'>nd so onere's more onere</div>'s more stuff here etc etc and so onere's more stuff here etc etc and so onere's more stuff here etc etc and so onere's more stuff here etc etc and so on
<br>

CSS

body{
    font-family:sans-serif;
}
h1{
    text-transform:uppercase;
}
.squiggle {
position:relative;
    overflow:hidden;
    padding-bottom:5px;
    display:inline-block;
    vertical-align:top;
    cursor:pointer;
}
.red{
    color:red;
}

.squiggle:before {
  content:...