JSFiddle - React, Tailwind, and code Playground

HTML

<div class="controls">
                        <div class="timeline"><div class="timeline_progress"></div></div>
                        <div class="icons">
                            <img src="img/icons/play.svg" class="play" />
                            <img src="img/icons/volume_1.svg" class="volume" />
                            <img src="img/icons/fullscreen_enter.svg" class="fullscreen" />
                            <div class="volumeslider_container">
                                <input type="range" class="volumeslider" min="0" max="1" value="0.25" step="0.001" />
                            </div>
                        </div>
                    </div>

CSS

.controls {
    perspective: 10px;
    height: auto;
    width: 100%;
    /*border: 1px solid #f00;*/
    bottom: 0;
    box-sizing: border-box;
    z-index: 2147483647;
    position: absolute;
    background-image: linear-gradient(0deg, rgba(50,50,50,0.5) 70% , rgba(10,10,10,0) 100%);
    transition: all 0.3s ease-in-out;
}
.controls .timeline {
    width: calc(100% - 40px);
    height: 5px;
    background-color: #444;
    margin: 0 20px;
    cursor: pointer;
}
.controls .timeline_progress {
    width: 0px;
    height: inherit;
    background-color: #a23;
}
.controls .icons {
    margin: 0 20px;
}
.controls .icons img {
    width: 32px;
    height: 32px;
    margin: 16px 10px;
    position: relative;
}
.controls .icons .fullscreen {
    float: right;
}
.controls .icons .volume:hover ~ .volumeslider_container {
    width: 163px;
}
.controls .volumeslider_container {
    width: 0px;
    overflow: hidden;
    display: inline-block;
    height: 64px;
    /*border: 1px solid #f00;*/
    margin: 0 10px;
    margin-left: -52px;
}
.controls .volumeslider_container:hover {
    transition: width 0.5s ease;
    width: 163px;
}
.controls .volumeslider {
    margin: 28px 52px;
    width: 100px;
    -webkit-appearance: none;
}
.controls .volumeslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid #000000;
    height: 32px;
    width: 16px;
    border-radius: 3px;
    background: #eee;
    cursor: pointer;
    margin-top: -12px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
.controls .volumeslider::-webkit-slider-runnable-track {
    width: 100px;
    height: 8px;
    cursor: pointer;
    background-color: #eee;
}
.controls .volumeslider:focus {
    outline:none;
}