JSFiddle - React, Tailwind, and code Playground

by Alex Baumgertner

HTML

<p><a href="/a/">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa neque, commodo vitae elementum nec, rutrum sed lorem. Vivamus sit amet libero ipsum, at semper tortor.</a></p>

<p><a href="/a/" class="dashed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa neque, commodo vitae elementum nec, rutrum sed lorem. Vivamus sit amet libero ipsum, at semper tortor.</a></p>

<p><a href="/a/" class="dotted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa neque, commodo vitae elementum nec, rutrum sed lorem. Vivamus sit amet libero ipsum, at semper tortor.</a></p>

CSS

p {
   margin: 10px;
}

a {
    text-decoration: none;
    background: -moz-linear-gradient(left, red, red 100%);
    background: -ms-linear-gradient(left, red, red 100%);
    background: -o-linear-gradient(left, red, red 100%);
    background: -webkit-gradient(linear, 0 0, 100% 0, from(red), to(red));
    background: -webkit-linear-gradient(left, red, red 100%);
    background: linear-gradient(left, red, red 100%);
    background-position: 0 100%;
    background-size: 10px 1px;
    background-repeat: repeat-x;
}

.dashed {
    background: -moz-linear-gradient(left, red, red 60%, transparent 60%);
    background: -ms-linear-gradient(left, red, red 60%, transparent 60%);
    background: -o-linear-gradient(left, red, red 60%, transparent 60%);
    background: -webkit-gradient(linear, 0 0, 100% 0, from(red), color-stop(0.6, red), color-stop(0.6, transparent));
    background: -webkit-linear-gradient(left, red, red 60%, transparent 60%);
    background: linear-gradient(left, red, red 60%, transparent 60%);
    background-size: 10px 1px;
    background-repeat: repeat-x;
    background-position: 0 100%;
}

.dotted {
    background: -moz-linear-gradient(left, red, red 50%, transparent 50%);
    background: -ms-linear-gradient(left, red, red 50%, transparent 50%);
    background: -o-linear-gradient(left, red, red 50%, transparent 50%);
    background: -webkit-gradient(linear, 0 0, 100% 0, from(red), color-stop(0.5, red), color-stop(0.5, transparent));
    background: -webkit-linear-gradient(left, red, red 50%, transparent 50%);
    background: linear-gradient(left, red, red 50%, transparent 50%);
    background-size: 2px 1px;
    background-repeat: repeat-x;
    background-position: 0 100%;
}