JSFiddle - React, Tailwind, and code Playground

by Pankaj Kargirwar

HTML

<body>
  <div id="app-content">
    <div id="app-left-panel">
    </div>

    <div id="app-resizer">
    </div>


    <div id="app-right-panel">
      <div id="a4-container">
        <svg viewBox="0 0 210 297" preserveAspectRatio="xMinYMin meet">
          <line x1="0" y1="50" x2="210" y2="50" stroke-dasharray="5,5" class="debug"></line>
          <line x1="0" y1="277" x2="210" y2="277" stroke-dasharray="5,5" class="debug"></line>
          <g id="page-0-line-0-0" transform="translate(0, 50)">
            <line x1="10" y1="0" x2="200" y2="0" class="staff-line-f"></line>
            <line x1="10" y1="4" x2="200" y2="4" class="staff-line-d"></line>
            <line x1="10" y1="8" x2="200" y2="8" class="staff-line-b"></line>
            <line x1="10" y1="12" x2="200" y2="12" class="staff-line-g"></line>
            <line x1="10" y1="16" x2="200" y2="16" class="staff-line-e"></line>
            <use xlink:href="#def-treble-clef" width="30" height="30" transform="translate(5, -7.25)"></use>
            <g class="note" transform="translate(40, 12)">
              <ellipse class="whole-note-head" rx="3" ry="1.75" transform-origin="center, center" transform="rotate(-20) scale(0.8 0.8)"></ellipse><text x="0" y="0" text-anchor="middle" dominant-baseline="middle" class="note-name" font-size="3" font-weight="bold">g4</text>
            </g>
            <line x1="0" y1="0" x2="0" y2="16" class="barline-0" transform="translate(200, 0)"></line>
            <line x1="0" y1="0" x2="210" y2="0" class="staff-top"></line>
            <line x1="0" y1="16" x2="210" y2="16" class="staff-bottom"></line><text x="0" y="-1.5" font-size="3" class="staff-top">p: 0 l: 0 s: 0</text><text x="0" y="14.5" font-size="3" class="staff-bottom">p: 0 l: 0 s: 0</text><text x="190" y="0" font-size="3" class="staff-top">x: 190 y: 50</text><text x="190" y="16" font-size="3" class="staff-bottom">x: 190 y: 66</text>
            <line x1="210" y1="0" x2="210" y2="16" class="currx"></line>
          </g>
    ...

CSS

#app-content {
  display: grid;
  grid-template-columns: 4fr 2px 8fr;
  height: 100%;
}

#app-resizer {
  cursor: col-resize;
  background-color: var(--grey-light);
}

#app-left-panel {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  background-color: #ccc;
}

#app-right-panel {
  overflow-y: auto;
}

#app-content-resizer {
  cursor: col-resize;
  background-color: var(--grey-light);
}

#a4-container {
  width: 794px;
  /* Width of A4 page in pixels */
  height: 1123px;
  /* Height of A4 page in pixels */
  margin: 0 auto;
  /* Center horizontally */
  background-color: white;
  /* Background color for the "page" */
  box-shadow:
    0 0 0 2px white,
    0.3em 0.3em 1em rgba(0, 0, 0, 0.2);
  position: relative;
  /* Ensure proper stacking of shadow and content */
  margin-top: 20px;
  margin-bottom: 20px;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  adjustView();
});

function adjustView() {
  let bodyDims = document.querySelector('body').getBoundingClientRect();
  this.$appLeftPanel = document.querySelector('#app-left-panel');
  this.$appLeftPanel.style.height = bodyDims.height + 'px';

  this.$appRightPanel = document.getElementById('app-right-panel');
  this.$appRightPanel.style.height = bodyDims.height + 'px';
}