JSFiddle - React, Tailwind, and code Playground

by lukemartin

HTML

<h1>Luke</h1>

CSS

@font-face {
  font-family: "LeagueGothicRegular";
  src: url("http://luke.is/themes/site_themes/lukeis/fonts/League_Gothic-webfont.eot"), url("http://luke.is/themes/site_themes/lukeis/fonts/League_Gothic-webfont.woff") format("woff"), url("http://luke.is/themes/site_themes/lukeis/fonts/League_Gothic-webfont.ttf") format("truetype"), url("http://luke.is/themes/site_themes/lukeis/fonts/League_Gothic-webfont.svg") format("svg");
}

body {
    background: #efefef;
}

h1 {
    font-family: "LeagueGothicRegular";
    text-transform: uppercase;
    font-weight: normal;
    font-size: 15em;
    color: #a9a9a9;
    text-align: center;
    margin-top: 80px;
    /*-webkit-text-stroke: 1px #cee9ff;*/
    /*-webkit-transform: rotate(-2.5deg);*/
    text-shadow: 1px 1px #656565, 2px 2px #656565, 3px 3px #656565, 4px 4px #656565, 5px 5px #656565, 6px 6px #656565, 7px 7px #656565, 8px 8px #656565, 9px 9px #656565;
    -webkit-transition: 0.25s all ease-in-out;
}

h1:hover {
    color: #a9d3e8;
    text-shadow: 1px 1px #658b9e, 2px 2px #658b9e, 3px 3px #658b9e, 4px 4px #658b9e, 5px 5px #658b9e, 6px 6px #658b9e, 7px 7px #658b9e, 8px 8px #658b9e, 9px 9px #658b9e, 10px 10px #658b9e, 11px 11px #658b9e, 12px 12px #658b9e, 13px 13px #658b9e, 14px 14px #658b9e, 15px 15px #658b9e, 16px 16px #658b9e, 17px 17px #658b9e, 18px 18px #658b9e, 19px 19px #658b9e;
    margin-top: 70px;
    margin-right: 19px;
}