JSFiddle - React, Tailwind, and code Playground

by thirdender

HTML

<a href="#" title="Monkeys!">Test</a>

SCSS

body {
    font: 12px Arial, sans-serif;
}
a[title] {
    position: relative;
}
a[title]:hover:after {
    content: attr(title);
    position: absolute;
    left: 90%;
    top: 40%;
    padding: .2em .4em;
    border: 1px solid #ccc;
    background: #ffffe0;
    color: #333;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, .1);
    -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, .1);
    background: -webkit-gradient(linear,left top,left bottom,from(#ffffe0),to(rgba(238, 238, 179, .8))), #ffffe0;
    background: -webkit-linear-gradient(top,#ffffe0,rgba(238, 238, 179, .8)), #ffffe0;
    background: -moz-linear-gradient(top,#ffffe0,rgba(238, 238, 179, .8)), #ffffe0;
    background: -o-linear-gradient(top,#ffffe0,rgba(238, 238, 179, .8)), #ffffe0;
    background: linear-gradient(top,#ffffe0,rgba(238, 238, 179, .8)), #ffffe0;
}