JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ecoute">
    <div class="cover">
        <img src="http://www.urlaubshits.co.uk/wp-content/uploads/metronomynightsout.png" width=72 height=72>
        <ul class="nav">
            <li><a href="#" class="previous">Previous</a></li>
            <li><a href="#" class="pause">Pause</a></li>
            <li><a href="#" class="next">Next</a></li>
        </ul>
    </div>
    <div class="meta">
        <h1>A Thing For Me</h1>
        <em>Nights Out</em>
        <em>Metronomy</em>
        <div class="progress">
            <span style="width:33%"></span>
        </div>
    </div>
</div>

CSS

html, body {
    background: #f64;
}

.ecoute {
    margin: 100px auto;
    overflow: hidden; /* try to use a better clearfix */
    width: 200px;
    font-family: Helvetica Neue, Helvetica, Open Sans, Arial, sans-serif;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-font-smoothing: antialised; /* sex appeal and hardware acceleration */
    -webkit-transform: translate3d(0,0,0);
}

.meta {
    float: left;
}

.meta h1 {
    font-weight: 700;
}

.meta em {
    display: block;
    font-size: .875em;
}

.progress {
    width: 100%;
    background: rgba(0,0,0,.3);
    background-image: -webkit-linear-gradient(transparent,rgba(0,0,0,.2));
    height: 10px;
    border-radius: 50px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.6);
    margin-top: 10px;
}

.progress span {
    display: block;
    border-radius: 50px;
    height: 10px;
    background: rgba(100,200,255,1);
    background-image: -webkit-linear-gradient(-45deg, transparent 0%,
                          transparent 25%, hsla(0,0%,100%,.3) 25%,
                          hsla(0,0%,100%,.3) 50%, transparent 50%,
                          transparent 75%, hsla(0,0%,100%,.3) 75%,
                          hsla(0,0%,100%,.3) 100%);
    background-size: 20px 20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 1px rgba(0,0,0,.7), inset 0 -5px 5px rgba(0,120,255,.6);
    -webkit-animation: progress 1s linear infinite;
}

.cover {
    float: left;
    width: 72px;
    height: 72px;
    margin: 0 10px 10px 0;
    border-radius: 5px;
    position: relative;
    z-index: 2;
}

.cover:after {
    display: block;
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    right: 1px;
    z-index: 3;
    pointer-events: none;
    background: -webkit-linear-gradient(-45deg, transparent, rgba(255,255,255,.1) 50%, transparent 50%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4);
    border-radius:...