JSFiddle - React, Tailwind, and code Playground

by Alex Bergin

HTML

<div id="letter">E</div>
<div id="description">is for Espresso</div>

<div id="animation">
    <div class="machine">
        <div class="lid"></div>
        <div class="groundsHolder"></div>
        <div class="steamer"></div>
        <div class="status">
            <div class="on"></div>
            <div class="off"></div>
        </div>
        <div class="verticalStructure"></div>
        <div class="head"></div>
        <div class="base"></div>
        <div class="spout"></div>
        <div class="back"></div>
    </div>
    
    <div class="cup"></div>
    
    <div class="kettle">
        <div class="spout"></div>
        <div class="lid"></div>
        <div class="handle"></div>
    </div>
    
    <div class="kettlecontents">
        <div></div>
    </div>
    
    <div class="grounds">
        <div class="contents">
            <div></div>
        </div>
        <div class="label">
            <span>C</span>
        </div>
    </div>
    
    <div class="filter">
        <div class="espresso"></div>
        <div class="spigot"></div>
        <div class="handle"></div>
    </div>
</div>

<!--

tumblr embed code

<iframe src="http://fiddle.jshell.net/alexbergin/3wkcc/60/show/" width="500" height="300" style="display:block;background-color:transparent;overflow:hidden;" allowTransparency="false" frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

-->

CSS

* {
    padding: 0;
    margin: 0;
}

html , body {
    width: 100%;
    height: 100%:
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 0%;
}

html {
    background-color: rgba(248,253,255,1);    
}

#letter {
    font-size: 120px;
    font-family: Helvetica;
    font-weight: Bold;
    color: rgba(18,22,26,0.7);
    width: 120px;
    height: 120px;
    text-align: center;
    vertical-align: middle;
    line-height: 120px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -60px;
    z-index: -1;
}

#description {
    position: fixed;
    bottom: 10px;
    width: 100%;
    z-index: 100;
    font-family: Helvetica;
    font-weight: 200;
    color: rgba(18,22,26,0.7);
    text-align: center;
    font-size: 11px;
    letter-spacing: 1px;
}

#animation {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 10px;
}

.filter {
    animation: filter 8s cubic-bezier(.48,-0.33,.55,1.31) 0s infinite normal none;
	-webkit-animation: filter 8s cubic-bezier(.48,-0.33,.55,1.31) 0s infinite normal none;
    width: 30px;
    height: 20px;
    border-radius: 5px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    background-color: rgba(218,216,212,1);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top:30px;
    margin-left: 60px;
    z-index: 1;
}

.filter:after {
    content:"";
    background-color: rgba(60,56,52,1);
    width: 65px;
    height: 10px;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    position: absolute;
    margin-left: 26px;
    margin-top: 3px;
    z-index: -10;
}

.filter .espresso {
    background-color: rgba(60,56,52,0.8);
    animation: espresso 8s cubic-bezier(.48,-0.33,.55,1.31) 0s infinite normal none;
	-webkit-animation: espresso 8s cubic-bezier(.48,-0.33,.55,1.31) 0s infinite normal none;
    position: absolute;
    width: 3px;
    height: 18px;
    top: 23px;
    left: 13px;
}

.filter .spigot {
    position:...