JSFiddle - React, Tailwind, and code Playground

by Tsuneo Yoshioka

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<body>
  <header>
    <nav class="navbar navbar-light bg-light">
      <span class="navbar-brand mb-0 h1">Navbar</span>
    </nav>
  </header>
  <main>
    <button type="button" class="c-language-button btn btn-primary">
      Language
    </button>
    <div class="c-tab-area">Tab</div>
    <div class="c-code-area">Code</div>
    <button type="button" class="c-run-button c-language-button btn btn-primary">
      Run
    </button>
    <button type="button" class="c-utility-button c-language-button btn btn-primary">
      Run
    </button>
    <div class="input">Input</div>
    <div class="output">Output</div>
  </main>
  <footer>
    footer
  </footer>
</body>

SCSS

body{
  display: grid;
  widht: 100%;
  height: 100vh;
  background-color: green;
  grid-template-rows: min-content auto min-content;
  grid-template-columns: 100%;
  // grid-template-areas: "header" "main" "footer";

}
header{
  // grid-area: header;
  //grid-row: 1;
}
main{
  // grid-area: main;
  //grid-row: 2;
  background-color: gray;
}
footer{
  //grid-area: footer;
  background-color: yellow;
}
.c-language-button{
  
}
.c-tab-area{
  
}
.c-code-area{
  
}
.c-code-area{
  border: 1px dashed;
}
.input{
  
}
.output{
  
}