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: #9ac1e2;
    text-align: center;
    margin-top: 80px;
    -webkit-text-stroke: 1px #cee9ff;
    -webkit-transform: rotate(-2.5deg);
}

JavaScript

var colour = "#6787a3",
    size = 8,
    string = "";

while(size--) {
    string += size + "px " + size + "px 1px " + colour + ", ";
}

string += "0px 0px 0px white";

$("h1").css("text-shadow", string);