JSFiddle - React, Tailwind, and code Playground

by adem

HTML

<link href='http://fonts.googleapis.com/css?family=Lobster+Two:700italic' rel='stylesheet' type='text/css'>
<div id="wrapper">
    <div id="colors">
        <div id="no1"></div>
        <div id="no2"></div>
        <div id="no3"></div>
        <div id="no4"></div>
        <div id="no5"></div>
    </div>
    <div id="name">
        aydio
    </div>
    .de
</div>

CSS

html {
    margin: 50px 0 0 0;
    font: bold italic 64px/2.5em 'Lobster Two';
    letter-spacing: -.03125em;
    color: #161616;
}

#wrapper {
    margin-left: -30px;
    -webkit-transition: all .5s cubic-bezier(.1,.9,.1,.9);
}

#colors {
    float: left;
    width: 200px;
    z-index: -1;
    margin-right: -1.25em;
}

#colors div {
    height: .5em;
}

#no1 { background: #105B63; }
#no2 { background: #FFFAD5; }
#no3 { background: #FFD34E; }
#no4 { background: #DB9E36; }
#no5 { background: #BD4932; }

#name { z-index: 1; float: left; background: #161616; color: #fff; width: 2.5em; height: 2.5em; text-align: center; text-indent: -.1em; border-radius: 1.25em; text-shadow: 1px 1px 0 #105B63, 2px 2px 0 #105B63, 3px 3px 0 #105B63, 4px 4px 0 #105B63, 5px 5px 0 #105B63;
}

#wrapper:hover {
    margin-left: 0;
}