JSFiddle - React, Tailwind, and code Playground

by Rifky Luthfan

HTML

<div id="page">
  <div>
    Commands
  </div>

  <div>
    <div>
      Logs
    </div>
    <div id="logsContainer">
    </div>
  </div>
</div>

CSS

body {
  margin: 0
}

#page {
  display: grid;
  grid-template-columns: 50% 50%;
  height: 100%;
}

#logsContainer {
  overflow-y: auto;
  height: calc(100vh - 18px);
}

JavaScript

$(document).ready(() => {
  for (let i = 0; i < 100; i++) {
    const newDiv = (`<div>Log Item</div>`);
    $("#logsContainer").append(newDiv);
  }
});