JSFiddle - React, Tailwind, and code Playground

by vincentieo

HTML

<a class="emboss lightAgain" title="Lorem ipsum">Lorem ipsum</a>
<a class="emboss darkAgain" title="Lorem ipsum">Lorem ipsum</a>
<a class="emboss darkAgain" title="StackOverFlow">StackOverFlow</a>

CSS

.emboss { font-size:4em; padding:50px; font-weight:bold; background:#0A539C; display:block; font-family: arial, sans-serif;
}
.light { color:#FFFFFF; text-shadow:0px -1px 0px rgba(0,0,0,0.9); }
.dark { color:#000000; text-shadow:0px 1px 0px rgba(255,255,255,0.1); }
.lightAgain { color:#FFFFFF; position:relative; }
.lightAgain:before {
    content: attr(title);
    position:absolute;
    color:rgba(0,0,0,0.1);
    top:-1px;
    left:-1px;
    padding:50px;
}
.darkAgain { color:#000000; position:relative; }
.darkAgain:before {
    content: attr(title);
    position:absolute;
    color:rgba(255,255,255,0.1);
    top:1px;
    left:1px;
    padding:50px;
}