JSFiddle - React, Tailwind, and code Playground

by Daniel Kuschny

HTML

<div id="page">
  <header>
    Your header
  </header>
  <main>
    <div id="alphaTabWrapper">
      <div id="alphaTabScroll">
        <div id="alphaTab"></div>
      </div>
      <div id="cursor"></div>
    </div>
  </main>
  <footer>Your footer</footer>
</div>

CSS

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
#page {
  display: flex;
  flex-direction: column;
  height: 100%;
}
header {
  background: black;
  color: #fff;
  height: 20vh;
}
main {
  flex-grow: 1;
  display: flex;
}
#alphaTabWrapper {
  position:relative;
  flex-grow: 1;
}
#alphaTabScroll {
  overflow-x: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#alphaTab {
    background: repeating-linear-gradient(
    45deg,
    #f0f0f0,
    #f0f0f0 10px,
    #e0e0e0 10px,
    #e0e0e0 20px
  );
  width: 3000px;
  height: 100%;
}
#cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100px;
  width: 3px;
  background: green;
}

footer {
  background: darkviolet;
  color: #fff;
  height: 20vh;
}