JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<p>Aliquam lorem ante, <span>dapibus in, viverra quis</span>, feugiat a, tellus. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Curabitur suscipit suscipit tellus. Nullam dictum felis eu pede mollis pretium.</p>

CSS

p{
  font-size: 30px;
}

span{
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 90%, rgba(0,0,0,1) 90%, rgba(0,0,0,1) 96%, rgba(0,0,0,0) 96%, rgba(0,0,0,0) 100%);
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 90%,rgba(0,0,0,1) 90%,rgba(0,0,0,1) 96%,rgba(0,0,0,0) 96%,rgba(0,0,0,0) 100%);
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 90%,rgba(0,0,0,1) 90%,rgba(0,0,0,1) 96%,rgba(0,0,0,0) 96%,rgba(0,0,0,0) 100%);
  text-shadow: 0.1em 0 0 #fff, -0.1em 0 0 #fff,
               0.05em 0 0 #fff, -0.05em 0 0 #fff;
}