JSFiddle - React, Tailwind, and code Playground

by GioLogist

HTML

<div class="post">
  <a class="fun-hover" href="#">iMore</a></div>

CSS

@font-face {
  font-family: 'Nexa Slab Bold';
  src: url("http://xfive.monadesign.com:3000/assets/fonts/nexa_slab_bold-webfont.eot");
  src: url("http://xfive.monadesign.com:3000/assets/fonts/nexa_slab_bold-webfont.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/nexa_slab_bold-webfont.woff2") format("woff2"), url("http://xfive.monadesign.com:3000/assets/fonts/nexa_slab_bold-webfont.woff") format("woff"), url("http://xfive.monadesign.com:3000/assets/fonts/nexa_slab_bold-webfont.ttf") format("truetype"), url("http://xfive.monadesign.com:3000/assets/fonts/nexa_slab_bold-webfont.svg#nexa_slabbold") format("svg");
  font-weight: bold;
  font-style: normal;
}
html {
  font-size: 10px;
  font-family: 'Nexa Slab Bold';
}
.post {
  max-width: 30rem;
  margin: 2rem;
  float: left;
}
a {
  font-size: 4rem;
  text-decoration: none;
  color: #1e1f23;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
}
.fun-hover {
  background-image: -webkit-linear-gradient(left, #25b0a9 50%, #fee603 50%);
  background-image: linear-gradient(to right, #25b0a9 50%, #fee603 50%);
  background-position: 0;
  background-size: 200%;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.fun-hover:hover {
  background-position: -100%;
}