JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<p><a href="#">Unstyled</a></p>

<p><a href="#" class="color">Color</a></p>

<p><a href="#" class="hover">Hover</a></p>

<p><a href="#" class="hover-bg">Hover Background</a></p>

<p><a href="#" class="decoration">Text decoration</a></p>

<p><a href="#" class="border">Border</a></p>

<p><a href="#" class="generate">Generated content</a></p>

CSS

a.color {
    color: #d34545;
}

a.hover {
    color: #800;
}
a.hover:hover {
    color: #f00;
}
a.hover-bg {
    color: #003b6c;
}

a.hover-bg:hover {
    background: #003bc6;
    color: #fff;
}

a.decoration {
    text-decoration: none;
}

a.decoration:hover {
    text-decoration: underline;
}

a.border {
    text-decoration: none;
    border-bottom: 1px solid;
}

a.border:hover {
    border-bottom: 1px dashed #008;
}

a.generate {
    text-decoration: none;
}

a.generate:hover:after {
    content: '>';
    margin-left: 4px;
    color: #000;
    font-weight: bold;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #ccc;
    border: 1px solid #999;
    border-radius: 50%;
    text-shadow: 1px 1px 1px #444;
}