JSFiddle - React, Tailwind, and code Playground

by alvaroveliz

HTML

<div id="player">
        <div id="player_artwork">
            <a href="javascript:void(0);">
                <img src="http://placehold.it/200x200" alt="artwork" />
            </a>
        </div>
        <div id="player_track">
            <div id="player_track">
                <a href="">Track Title</a>
            </div>
            <div id="player_artist">
                Artist
            </div>
        </div>
        <div id="player_buttons">
            <ul>
                <li><a href="" id="player_prev"><span class="icon-to-start"></span></a></li>
                <li><a href="" id="player_play"><span class="icon-play"></span></a></li>
                <li><a href="" id="player_next"><span class="icon-to-end"></span></a></li>
            </ul>
        </div>
    </div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
@import url(http://labs.alvaroveliz.cl/fontello/fontello.css);
@import url(http://labs.alvaroveliz.cl/fontello/animation.css);

#player {
    font-family: "Roboto", sans-serif;
}

.icon-play:before { content: '\e88f'; } /* '' */