JSFiddle - React, Tailwind, and code Playground

by JamesPattison

HTML

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
<br/><br/>
<div>

</div>
<p>Oh dear, your <span class="highlight">Stock Options</span> have plumetted</p>

CSS

html{
  font-size: 4em;
  font-family: 'IBM Plex Sans', sans-serif;
}


.highlight{
  position: relative;
  letter-spacing: 1px;
}
.highlight:before{
  content: "Stock Options";
  background-color: #ff6db7;
  width: 100%;
  line-height: 0.80em;
  height: 0.9em;
  top: 0.25rem; 
  position: absolute;
  padding: 0 0 0.1em 0;
}