JSFiddle - React, Tailwind, and code Playground

by David Nabb

HTML

<div class="left-to-right">
  <p>The <strong>bottom</strong> edge is a little wonky here.</p>
</div>

CSS

body {
  padding: 50px;
}

p {
  height: 50px;
  width: 500px;
  padding: 0;
  margin: auto;
}

strong {
  font-weight: bold
}

.left-to-right {
  border-width: 0 0 5px 0;
  -webkit-border-image: -webkit-gradient(linear, 100% 0, 0 0, from(black), to(rgba(0, 0, 0, 0))) 100% 1;
  -webkit-border-image: -webkit-linear-gradient(top, black, rgba(0, 0, 0, 0)) 100% 1;
  -o-border-image: -o-linear-gradient(top, black, rgba(0, 0, 0, 0)) 100% 1;
  -moz-border-image: -moz-linear-gradient(top, black, rgba(0, 0, 0, 0)) 100% 1;
}