JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <meta charset="utf-8">
  <title>Flo Music</title>
  <link rel="stylesheet" type="text/css" href="listen.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>

<body>
  <div id="test">
    <div id="body-wrapper">
      <aside>
        <div id="aside-wrap">
          <div id="user-info">
            <i class="far fa-user-circle" id="user"></i>
            <h3>Emmanuel</h3>
          </div>

          <div id="box-1">
            <p>Your Library</p>
            <p>Recently Played</p>
            <p>Songs</p>
            <p>Playlist</p>
          </div>

          <div id="box-2">
            <p>Your Library</p>
            <p>Recently Played</p>
            <p>Songs</p>
            <p>Playlist</p>
          </div>

          <p>HOME</p>
        </div>
      </aside>

      <section id="section1">
        <div id="section1-wrapper">
          <h1>New Releases</h1>
          <div id="image-row-1">
            <div class="image-box"><img src="http://i.imgur.com/60PVLis.png" width="50" height="50"></div>
            <div class="image-box"><img src="http://i.imgur.com/60PVLis.png" width="50" height="50"></div>
            <div class="image-box"><img src="http://i.imgur.com/60PVLis.png" width="50" height="50"></div>
            <div class="image-box"><img src="http://i.imgur.com/60PVLis.png" width="50" height="50"></div>
          </div>
          <div id="image-row-2">
            <div class="image-box"><img src="http://i.imgur.com/60PVLis.png" width="50" height="50"></div>
            <div class="image-box"><img src="http://i.imgur.com/60PVLis.png" width="50" height="50"></div>
            <div class="image-box"><img src="http://i.imgur.com/60PVLis.png" width="50" height="50"></div>
            <div...

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

 ::-webkit-scrollbar {
  width: 15px;
}


/* Track */

::-webkit-scrollbar-track {
  background: #f1f1f1;
}


/* Handle */

::-webkit-scrollbar-thumb {
  background: #888;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
}


/*----------SECTION 1----------*/

header {
  height: 80px;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#header-wrapper {
  display: flex;
  width: 55%;
  justify-content: space-between;
  align-items: center;
}

#logo {
  width: 70px;
}

nav a {
  color: white;
  padding: 20px;
  font-family: 'Roboto';
  font-size: 0.8em;
  font-weight: bold;
}

@media only screen and (max-width: 750px) {
  nav {
    display: none;
  }
}

#mobile-menu {
  color: white;
  font-size: 1.3em;
}

@media only screen and (min-width: 750px) {
  #mobile-menu {
    display: none;
  }
}

#body-wrapper {
  display: flex;
  /* height: 100%; */
  height: calc(100vh - 80px); /* new; less fixed footer height */
}

aside {
  width: 300px;
  height: 889px;
  background-color: #0c0c0c;
  display: flex;
  align-items: center;
  padding-top: 50px;
  flex-direction: column;
}

#aside-wrap {
  width: 70%;
}

#user-info {
  display: flex;
  margin: 10px;
  margin-left: 0;
  margin-bottom: 50px;
  justify-content: center;
  align-items: center;
  font-family: 'Roboto';
  font-weight: 400;
}

#user {
  font-size: 40px;
  color: white;
  margin-right: 20px;
}

aside h3 {
  color: white;
  font-size: 1.2em;
}

#hello {
  color: white;
  font-size: 20px;
}

#box-1 {
  color: #808080;
  margin-bottom: 60px;
}

#box-1 p {
  margin: 20px;
  margin-left: 0;
  font-family: 'Roboto';
  font-size: 0.9em;
}

#box-2 {
  color: #808080;
}

#box-2 p {
  margin: 20px;
  margin-left: 0;
  font-family: 'Roboto';
  font-size:...