JSFiddle - React, Tailwind, and code Playground

by tamtakoe

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, #abd1ff, #abd1ff 100%);
    background: -ms-linear-gradient(left, #abd1ff, #abd1ff 100%);
    background: -o-linear-gradient(left, #abd1ff, #abd1ff 100%);
    background: -webkit-gradient(linear, 0 0, 100% 0, from(#abd1ff), to(#abd1ff));
    background: -webkit-linear-gradient(left, #abd1ff, #abd1ff  100%);
    background: linear-gradient(left, #abd1ff, #abd1ff 100%);
    background-position: 0 90%;
    background-size: 10px 1px;
    background-repeat: repeat-x;
}

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

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

a:hover {
    color: red;
    text-decoration: none;
    background: -moz-linear-gradient(left, red, red 100%);
    background:...