JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<a class="jp-unmute" href="#">
    <span></span>
</a>
<br /><br /><br /><br />


<a class="jp-volume-bar" href="#"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></a>

CSS

.jp-play, .jp-stop, .jp-pause, .jp-mute, .jp-unmute, .arrowdown, .arrowup, .arrowleft, .arrowright, .stripes {
width: 20px;
height: 20px;
border-radius: 0%;
border: 2px solid #6179a6;
margin-right: -1px;
float: left;
}
.jp-volume-bar{
    width: 76px;
height: 20px;
border-radius: 0%;
border: 2px solid #6179a6;
margin-right: -1px;
float: left;
}
.jp-volume-bar span:after{
    float:left;
    display: block;
    width:1px;
    height:10px;
    border-left: 5px solid #6179a6;  
    content: "";
    margin: 5px 0px 0px 2px;
}
.jp-volume-bar span:hover:after{
    float:left;
    display: block;
    width:1px;
    height:11px;
    border-left: 5px solid #4c6188;  
    content: "";
    margin: 4px 0px 0px 2px;
}










.jp-unmute:before {
display: block;
position: absolute;
transform: rotate-44deg);
content: "";
border-right: 7px solid #6179a6;
border-left: 7px solid transparent;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
margin: 3px 0px 0px -4px;
    z-index:9999;
}
.jp-unmute:after {
background: #6179a6;
content: "";
display: block;
position: absolute;
margin: 7px 0px 0px 3px;
width: 5px;
height: 6px;
    z-index:9999;
}
.jp-unmute span:before{
    display: block;
    position: absolute;
    content: "";
    width: 6px;
    height: 14px;
    border-radius: 50%;
    background: #6179a6;
    margin: 3px 0px 0px 9px;
} 
.jp-unmute span:after{
    display: block;
    position: absolute;
    content: "";
    width: 8px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    margin: 2px 0px 0px 5px;
}
.jp-volume-bar{
    width: 76px;
height: 20px;
border-radius: 0%;
border: 2px solid #6179a6;
margin-right: -1px;
float: left;
}
.jp-volume-bar span:after{
    float:left;
    display: block;
    width:1px;
    height:10px;
    border-left: 5px solid #6179a6;  
    content: "";
    margin: 5px 0px 0px 2px;
}
.jp-volume-bar span:hover:after{
    float:left;
    display: block;
    width:1px;
    height:11px;
    border-left: 5px...