JSFiddle - React, Tailwind, and code Playground

HTML

<script src="fonts.googleapis.com/css?family=Lato:400,300,100"></script>
<script src="&lt;link href=&#39;http://fonts.googleapis.com/css?family=Lato:400,300,100&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;&gt;"></script>
<div id="bg">
    <p>Grumpy wizards make toxic brew for the evil Queen and Jack</p>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:400,300,100);

#bg   {background-color: #1abc9c;  position: fixed; top: 0; left: 0; width:100%; min-height: 100%; padding:50px;}
p     {font-size:22px; font-family: 'Lato', sans-serif; font-weight:100; color:#fff;-webkit-font-smoothing: subpixel-antialiased;}

JavaScript

/*

    WHEN VIEWED IN SAFARI, THE TEXT COMES OUT TOO THIN, THIS DOSNT HAPPEN IN CHROME, 
    OR FF,

*/