JSFiddle - React, Tailwind, and code Playground

by D S

HTML

<div class="musicplayer">
  <div class="blurBG"></div>
  <div class="lSide">
    <div class="artworkBox"></div>
    <div class="display">
      <div class="displayTitle">Title</div>
      <div class="displayArtist">Artist</div>
    </div>
  </div>
  <div class="rSide">
    <div class="plylst">
      <div class="rw">
        <div class="nmr">1</div>
        <div class="inf">2</div>
        <div class="srs">3</div>
        <div class="durs">4</div>
      </div>
    </div>
  </div>
  <div class="bSide">
    <div class="musicMGR">
      <div class="prevBtn">prv</div>
      <div class="plyBtn">ply</div>
      <div class="nxtBtn">nxt</div>
    </div>
    <div class="SeekbarGR">
      <div class="plydTime">00:20</div>
      <div class="seekbar">
        <div class="cirl"></div>
      </div>
      <div class="dueTime">03:55</div>
    </div>
    <div class="sourceBx">
    </div>
    <div class="musicSets">
      <div class="rept">rpt</div>
      <div class="shff">shf</div>
      <div class="vols">vol</div>
    </div>
  </div>
</div>

CSS

.musicplayer {
  width: 768px;
  height: 500px;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
  color: #fff;
}

.musicplayer > .blurBG {
  float: left;
  width: 100%;
  height: 100%;
  position: absolute;
  background: black url(https://goo.gl/grG9FE);
  background-size: cover;
  filter: blur(15px);
}

.musicplayer > .lSide {
  float: left;
  width: 49.5%;
  height: 90%;
  border: 1px solid red;
  position: relative;
  display: table-cell;
}

.musicplayer > .rSide {
  float: right;
  width: 49.5%;
  height: 90%;
  border: 1px solid red;
  position: relative;
}

.musicplayer > .bSide {
  width: 100%;
  height: 9%;
  position: absolute;
  bottom: 0;
  border: 1px solid yellow;
}


/** ------------------------------------- **/

.musicplayer > .lSide > .artworkBox {
  width: 300px;
  height: 300px;
  border: 1px solid rgba(255, 255, 255, .2);
  margin: 50px auto 0 auto;
  background: url(https://goo.gl/grG9FE);
  background-size: cover;
}

.musicplayer > .lSide > .display {
  width: 300px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, .2);
  margin: 5px auto 0 auto;
  text-align: center;
}

.musicplayer > .lSide > .display div {
  margin: 5px 0 0 0;
}

.musicplayer > .lSide > .display > .displayTitle {}

.musicplayer > .lSide > .display > .displayArtist {}

.musicplayer > .bSide > div {
  float: left;
}

.musicplayer > .bSide > .musicMGR {
  height: 100%;
  width: 140px;
  border: 1px solid rgba(255, 255, 255, .9);
}

.musicplayer > .bSide > .musicMGR > div {
  width: 40px;
  height: 100%;
  float: left;
}

.musicplayer > .bSide > .musicMGR > .prevBtn {}

.musicplayer > .bSide > .musicMGR > .plyBtn {
  width: 48px;
}

.musicplayer > .bSide > .musicMGR > .nxtBtn {}

.musicplayer > .bSide > .SeekbarGR {
  height: 100%;
  width: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-61%, -50%);
  border: 1px solid rgba(255, 255, 255, .9);
}

.musicplayer > .bSide > .SeekbarGR > div {
  float: left;
}

.musicplayer >...