JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html><html>

<head>
    <meta charset='utf-8'>
</head>

<body>
    <span>And then they</span> <details><summary>SPOILER</summary>all
    die</details><span>!</span>
</body>

</html>

CSS

details { display: inline; background: #ffa0a0; border-radius: 2px;
          padding: 1px 4px; }
summary { display: inline; text-transform: uppercase; font-size: 10px;
          vertical-align: middle; color: rgba(0,0,0,.8); cursor: pointer; }
details:hover { background: #f06060; }
details[open] > summary { margin-right: 4px; }