JSFiddle - React, Tailwind, and code Playground

by adammw

HTML

<audio controls>

CSS

audio {
    border: none; 
    margin: 8px;
    outline: none;
}

::-webkit-media-controls-panel {
    background: -webkit-linear-gradient(top, hsla(0, 0%, 50%, 0.8), hsla(0, 0%, 0%, 0.9));
    border-radius: 8px;
    box-shadow: #999 2px 2px 2px;
    border: none; 
}

audio:focus::-webkit-media-controls-panel {
    border:none;
    box-shadow: orange 0 0 8px, #999 2px 2px 2px;
}