JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<img src="http://f.cl.ly/items/052e44100k1n0X2X3p0p/Screen%20Shot%202013-05-14%20at%202.40.53%20AM.png">
<fowd>
    <eye>
        <pupil></pupil>
    </eye>
</fowd>

CSS

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
    padding: 5%;
}

img {
    width: 100px;
    margin: 0 0 50px 0;
}

fowd,
fowd:before,
fowd:after,
fowd *:before,
fowd *:after,
fowd eye,
fowd pupil {
    content: '';
    display: block;
    position: absolute;
}

fowd {
    font-size: 50px;
    line-height: 100%;
    background: #292929;
}

fowd:before,
fowd:after {
    background: #292929;
    width: 1em;
    height: 1.5em;
    position: absolute;
    border-radius: 0.15em;
    -webkit-transform: rotate(38deg) skewX(10deg);
}

fowd:after {
    -webkit-transform: rotate(90deg);
}

fowd pupil {
    width: 1em;
    height: 1em;
    background: #d63737;
    border-radius: 50%;
    z-index: 1;
}

fowd pupil:after {
    height: 0.4em;
    width: 0.4em;
    border-radius: 50%;
    top: 0.3em;
    left: 0.3em;
    background: #292929;
}