JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="tuneWrapper">

<div class="playerControls"><a>Player</a></div>
<input type="radio" name="list" id="list1" class="none" checked="checked">
<input type="radio" name="list" id="list2" class="none">
<input type="radio" name="list" id="list3" class="none">
<label for="list1"><a>now</a></label>
<label for="list2"><a>buy</a></label>
<label for="list3"><a>help?</a></label>
<div class="playerDisplay">
<div class=" fL audioController prevSong"></div>
<div class=" fL audioController playSong"></div>
<div class=" fL audioController nextSong"></div>
    <div class=" fL display">
        <div class="display-progress"></div>
    </div>
</div>
    <div  class="list1">
      <ul class="list-container" id="playlist">
            <li title="gold panda" name="you">
                <div class="rank">01</div>
            </li>
            
            <li title="gold panda" name="you">
                <div class="rank">02</div>
            </li>
            
            <li title="gold panda" name="you">
                <div class="rank">03</div>
            </li>
            
            <li title="gold panda" name="you">
                <div class="rank">04</div>
            </li>
            
            <li title="gold panda" name="you">
                <div class="rank">05</div>
            </li>
            
            <li title="gold panda" name="you">
                <div class="rank">06</div>
            </li>
            
            <li title="gold panda" name="you">
                <div class="rank">07</div>
            </li>

        </ul>
    </div>
    <!-- list1 end -->
    <div class="list2">
      <ul class="list-container"  id="playlist" >
            <li title="gold panda" name="you">
                <div class="rank">08</div>
            </li>
      </ul>
    </div>
    
     <!-- list2 end -->
    <div class="list3">
      <ul class="list-container"  id="playlist">
            <li title="gold panda" name="you">
                <div...

CSS

.tuneWrapper{
width:1250px;
position:relative;
padding-top:10px;
font-family: Verdana, Geneva, sans-serif;     
}
.fL{
float:left;
}

input.none{
display:none;   
}
div.playerControls  {
border-right:4px solid #C4302B;
}
label, div.playerControls {
background-image: linear-gradient(bottom, rgb(37,37,37) 87%, rgb(41,41,41) 67%);
background-image: -o-linear-gradient(bottom, rgb(37,37,37) 87%, rgb(41,41,41) 67%);
background-image: -moz-linear-gradient(bottom, rgb(37,37,37) 87%, rgb(41,41,41) 67%);
background-image: -webkit-linear-gradient(bottom, rgb(37,37,37) 87%, rgb(41,41,41) 67%);
background-image: -ms-linear-gradient(bottom, rgb(37,37,37) 87%, rgb(41,41,41) 67%);
background-image: -webkit-gradient(linear,left bottom,left top, color-stop(0.87, rgb(37,37,37)), color-stop(0.67, rgb(41,41,41)));
border-top: 1px solid #323232;
border-bottom: 1px solid #1B1B1B; 
display:block;  
cursor: pointer;    
width:100px;
height:40px;
}
 label a, .playerControls a{
color: #aaa;
font-size:12px;
margin:0px 0px 0px 26px;
line-height:38px;  
text-shadow: 0 -1px 0 rgba(0, 0, 0, .8);    
}
 label:hover >a{
color: #17B7EB;    
}
.playerDisplay{
position:absolute;
top:10px;
left:100px; 
}
.audioController{
width: 40px;
height: 40px;
position: relative;
left: 10px;
top: 0px;
border-top: 1px solid #323232;
border-bottom: 1px solid #1B1B1B;    
background-image: linear-gradient(bottom, rgb(221,223,225) 3%, rgb(204,210,213) 52%, rgb(221,223,225) 76%);
background-image: -o-linear-gradient(bottom, rgb(221,223,225) 3%, rgb(204,210,213) 52%, rgb(221,223,225) 76%);
background-image: -moz-linear-gradient(bottom, rgb(221,223,225) 3%, rgb(204,210,213) 52%, rgb(221,223,225) 76%);
background-image: -webkit-linear-gradient(bottom, rgb(221,223,225) 3%, rgb(204,210,213) 52%, rgb(221,223,225) 76%);
background-image: -ms-linear-gradient(bottom, rgb(221,223,225) 3%, rgb(204,210,213) 52%, rgb(221,223,225) 76%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.03,...