JSFiddle - React, Tailwind, and code Playground

by Zachary Cross

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<div class="container">
  <div class="content"></div>
  <div class="sidebar">
    <ul style="list-style: none;">
      <li>Account</li>
      <li>Tracks</li>
      <li>Albums</li>
      <li>Artists</li>
      <li>Playlists</li>
    </ul>
  </div>
  <div class="controlbar">
    <div class="metadata">

    </div>
    <div class="controls main">
      <span class="button prev"></span>
      <span class="button play-pause"></span>
      <span class="button next"></span>
    </div>
    <div class="controls secondary">
      <span class="button repeat-1-all"></span>
      <span class="button shuffle"></span>
    </div>
  </div>
</div>

CSS

@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css';
* {
  border: solid 2px;
}

/* body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  padding: none;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
} */

/* grid layout */
.container {
  display: grid;
  grid-template-areas:
    "sidebar content"
    "sidebar content"
    "controlbar controlbar";
  grid-template-columns: 1fr 12fr;
  grid-gap: 12px;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}


.controlbar {
  display: grid;
	background-color: grey;
  grid-area: controlbar;
  grid-template-areas:
    "metadata maincontrols secondarycontrols";
  grid-template-columns: 1fr 3fr 1fr;
  grid-gap: 5px;
}


/* controlbar */
.controlbar .controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}

/* controlbar positioning MAIN */
.controlbar .controls.main {
  grid-area: maincontrols;
}

/* controlbar positioning SECONDARY */
.controlbar .controls.secondary {
  grid-area: secondarycontrols;
}

/* controls */

/* .controlbar .controls.main .play-pause {
	
} */

.button {
  font-family: "Font Awesome 5 Free";
  width: 30px;
  display: inline-block;
  font-size: 28px;
  color: black;
  -webkit-font-smoothing: antialiased;
}

.controlbar .controls.main .play-pause::before {
  content: "\f144";
}

.controlbar .controls.main .prev::before {
  content: "\f04e";
}

JavaScript

//MediaSession API