JSFiddle - React, Tailwind, and code Playground

HTML

Not spoiler. Not spoiler. Not spoiler. Not spoiler.
<span class="spoiler-block">
    <span class="spoiler-head">Spoiler</span>
    <span class="spoiler-body">Some text with all the crap and stuff. Some text with all the crap and stuff.Some text with all the crap and stuff.Some text with all the crap and stuff.Some text with all the crap and stuff.Some text with all the crap and stuff.Some text with all the crap and stuff.Some text with all the crap and stuff.Some text with all the crap and stuff.Some text with all the crap and stuff.Some text with all the crap and stuff.Some text with all the crap and stuff.Some text with all the crap and stuff.Some text with all the crap and stuff.Some text with all the crap and stuff.Some text with all the crap and stuff.Some text with all the crap and stuff.</span>
</span> 
Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler. Not spoiler.

CSS

span.spoiler-head {
  background-color: #003;
  color: #BCCAE8;
  padding: 2px 8px;
  border-radius: 4px;    
}

span.spoiler-body {
  display: none;
}

span.spoiler-block:hover > span.spoiler-body {
  display: inline;
}

span.spoiler-block:hover > span.spoiler-head {
  display: none;
}