JSFiddle - React, Tailwind, and code Playground

by Chetan Hanumantha

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;   
}