JSFiddle - React, Tailwind, and code Playground

HTML

<div id="media-control" class="media-control hidden">
<div class="media-control-right">
<button class="media-control-mute">Mute</button>  
<button class="media-control-volume-up">Vol+</button>  
<button class="media-control-volume-down">Vol-</button>  
<button class="media-control-fullscreen">Fullscreen</button>  
<button class="media-control-play">Play</button>
<button class="media-control-pause">pause</button>
</div>
</div>

CSS

.media-container .media-control button {
    display: block;
    width: 26px;
    height: 28px;
    line-height: 28px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    border: none;
    background-color: transparent;
}