JSFiddle - React, Tailwind, and code Playground

by Nikita Elsakov

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="player">
                    <div class="playerControlsContainer">
                        <div class="trackName">
                            <p>Vladimir Elsakov - Vstrecha</p>
                            <div class="timeSliderContainer">
                                <div class="timePlaying">0:05</div>
                                <div class="timeSlider">
                                    <div class="slider"></div>
                                </div>
                                <div class="trackTime">3:05</div>
                            </div>
                        </div>
                        <div class="playerControls">
                            
                            <div class="controlsBtnContainer">
                                <div class="controls">
                                        <div class="prev">
                                          <button><i class="fa fa-chevron-left" aria-hidden="true"></i></button>
                                      </div>
                                      <div class="play">
                                          <button><i class="fa fa-play" aria-hidden="true"></i></button>
                                      </div>
                                      <div class="next">
                                          <button><i class="fa fa-chevron-right" aria-hidden="true"></i></button>
                                      </div>
                                      <div class="showPlaylist">
                                          <button><i class="fa fa-bars" aria-hidden="true"></i></button>
                                      </div>
                              </div>
                                <div class="vlmSliderContainer">
                                      <div class="vlmSlider"></div>
                                </div>
               ...

SCSS

@import url('https://fonts.googleapis.com/css?family=Raleway');
* {
  -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
  font-family: 'Raleway';
  height: 100%;
}
.player {
  width: 60%;
  height: 90%;
  background: #ccc;
  display: flex;
  flex-flow: column;
  
  .playerControlsContainer {
    padding: .5rem;
    flex: 1 1 auto;
    background: #e7e7e7;
    display: flex;
    flex-flow: column;
    align-items: center;
    
      .trackName {
        height: 20px;
        p {
          color: #fff;
          font-size: 1.5rem;
        }
        border-radius: .5rem;
                box-sizing: border-box;
        font-size:1rem;
        text-align: center;
        padding: .5rem;
        flex: 1 1 auto;
        background: #555;
        width: 80%;
        margin-bottom: .5rem;
        
        .timeSliderContainer {
          display: flex;
          flex-flow:row;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          background: #555;
          .timePlaying {
            font-size: .5rem;
            color: #eee;
            flex: 1 1 auto;
          }
          .trackTime {
            font-size: .5rem;
            color: #eee;
            flex: 1 3 auto;
          }
          .timeSlider {
            flex: 8 2 auto;
            background: #fff;
            box-sizing: border-box;
            width: 80%;
            padding: .2rem;
            border-radius: 5rem;
            .slider {
              width: 45%;
              height: .5rem;
              background: #09bbed;
              border-radius: 2rem;
            }
          }
        }
      }
      .playerControls {
        flex: 1 1 auto;
        background: #e7e7e7;
        width: 100%;
        color: white;
        display: flex;
        flex-flow: column;
        align-items: center;
        
        .controlsBtnContainer {
            width: 80%;
            flex: 1 2 auto;
           ...