JSFiddle - React, Tailwind, and code Playground

by mackry

HTML

<link href='http://fonts.googleapis.com/css?family=Bowlby+One+SC' rel='stylesheet' type='text/css'>

<ul id="logo">
    <li>LIMEADE</li>
    <li>LABS</li>
    <div id="bubbles">
        <span class="bubble bubble1">
            <span class="glow"></span>
        </span>
        <span class="bubble bubble2">
            <span class="glow"></span>
        </span>
        <span class="bubble bubble3">
            <span class="glow"></span>
        </span>
        <span class="bubble bubble4">
            <span class="glow"></span>
        </span>
    </div>
    <div id="logo-shadow"></div>
</ul>

CSS

body {
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0) 60%, rgba(0,0,0,0.05) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(60%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.05)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 60%,rgba(0,0,0,0.05) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 60%,rgba(0,0,0,0.05) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 60%,rgba(0,0,0,0.05) 100%);
    background: radial-gradient(center, ellipse cover, rgba(255,255,255,0) 60%,rgba(0,0,0,0.05) 100%);
}

#logo {
    color: #fff;
    font-family: 'Bowlby One SC', cursive;
    font-size: 70px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -335px;
    margin-top: -60px;
}

#logo li { 
    background: #bbd300;
    float: left;
    padding: 5px 30px;
}

#logo li:last-of-type {
    background: #94b900;
}

#logo-shadow {
    width: 110%;
    height: 1px;
    background: #f9f9f9;
    position: absolute;
    bottom: -70px;
    margin-left: -35px;
    
    -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}


/* bubbles */
#bubbles {
    height: 300px;
    width: 263px;
    position: absolute;
    right: 0;
    bottom: 0;
}

#bubbles .bubble {
    background: #94b900;
    background: -moz-radial-gradient(85% 85%, circle, rgba(148,185,0,.1) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-radial-gradient(85% 85%, circle, rgba(148,185,0,.1) 0%, rgba(255,255,255,1) 100%);
    background: -o-radial-gradient(85% 85%, circle, rgba(148,185,0,.1) 0%, rgba(255,255,255,1) 100%);
    background: -ms-radial-gradient(85% 85%, circle, rgba(148,185,0,.1) 0%, rgba(255,255,255,1) 100%);
    background: radial-gradient(85% 85%, circle, rgba(148,185,0,.1) 0%, rgba(255,255,255,1)...