JSFiddle - React, Tailwind, and code Playground

HTML

<div id="player">
            <div class="controls">
                <span class="control playpause" title="play/pause"></span>
                <span class="control volume" title="volume"></span>
                <span class="control resize" title="maximize/restore"></span>
            </div>
        </div>

CSS

#player {
                width: 640px;
                height: 360px;
                background-color: #aaa;
                border: 1px solid #555;
                position: relative;
            }
            #player div.controls {
                width: 100%;
                height: 26px;
                line-height: 26px;
                position: relative;
                left: 0;
                bottom: 0;
                z-index: 2;
                background-color: #222;
                opacity: 0.5;
            }
            #player span.control {
                padding-left: 10px;
                padding-right: 10px;
                margin-right: 5px;
                cursor: pointer;
            }
            #player span.control:hover {
                background-color: #555;
            }
            #player span.control:first-child {
                margin-left: 5px;
            }