JSFiddle - React, Tailwind, and code Playground

by jcutrell

HTML

<link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

<div id="logo">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="160.656px" height="162.536px" viewBox="0 0 160.656 162.536" enable-background="new 0 0 160.656 162.536"
     xml:space="preserve">
<g>
    <path d="M45.075,112.022c2.615-6.395,4.828-14.004,6.641-22.827l-1.898-1.181c-3.487,0.685-6.812,1.873-9.973,3.565
        c-3.163,1.692-6.103,3.703-8.82,6.027c-2.718,2.326-5.171,4.883-7.358,7.671c-2.188,2.787-4.061,5.6-5.615,8.438
        c-1.556,2.838-2.752,5.617-3.589,8.337c-0.415,1.345-0.725,2.623-0.934,3.838c3.212,4.8,6.928,9.232,11.072,13.226
        c1.16-0.49,2.375-1.169,3.655-2.059c2.854-1.984,5.717-5.054,8.588-9.208C39.716,123.693,42.459,118.417,45.075,112.022z"/>
    <path d="M45.152,10.607c3.077,0,6.042,0.795,8.896,2.385c2.854,1.589,5.393,4.113,7.615,7.569
        c2.222,3.456,4,7.933,5.333,13.429c1.334,5.496,2,12.132,2,19.909c0,2.342-0.331,6.559-0.994,12.65
        c-0.664,6.09-1.284,11.934-1.859,17.531c2.084,1.308,4.196,2.579,6.333,3.818c0.817,0.474,1.656,0.946,2.48,1.419
        c-0.002-0.203-0.012-0.405-0.012-0.61c0-3.167,0.341-6.565,1.026-10.196c0.684-3.631,1.667-7.333,2.949-11.103
        c1.281-3.768,2.845-7.529,4.692-11.282c1.846-3.751,3.938-7.348,6.281-10.791c2.342-3.442,4.914-6.635,7.717-9.579
        c2.803-2.942,5.796-5.507,8.974-7.693c3.181-2.186,6.529-3.898,10.052-5.138c3.52-1.238,7.179-1.858,10.974-1.858
        c2.393,0,4.816,0.419,7.273,1.244C120.554,9.049,101.39,0.939,80.328,0.939c-14.109,0-27.366,3.643-38.89,10.031
        C42.673,10.734,43.911,10.607,45.152,10.607z"/>
    <path d="M131.119,33.502c-1.454-0.632-3.223-0.948-5.308-0.948c-2.461,0-4.862,0.542-7.205,1.629
       ...

CSS

body {
background-image: url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/shl.png');
    font-family: "PT Serif", serif;
    font-size: 14px;
    line-height: 2.2;
}
h1,h2,h3 {
    font-family: "Anton";
    text-transform: uppercase;
    font-size: 6em;
    line-height: 1;
    color: #b8dff5;
    margin: 0.4em 0;
}
svg {-webkit-transition: all 0.2s linear;}
svg:hover {
    -webkit-transform: scale(1.1) rotateZ(361deg);
}
svg:hover path {
    fill: #75281B;
}
svg path {
    fill: #000;
    -webkit-transition: all 0.3s linear;
}
#logo {
    float: left;
    margin-right: 5%;
    width: 20%;
}
#post {
    box-sizing: border-box;
    padding: 30px;
    background: #fff;
    width: 70%;
    float: right;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}