JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<!DOCTYPE html>
<html lang="en">
<body>


<div class="maindiv container">
    <div class="left-pane">
    content
    </div>

    <div class="mid-pane">
    content
    </div>

    <div class="right-pane">
    content
    </div>
</div>

</body>
</html>

CSS

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
}
.maindiv {
  height: 100%;
  padding: 0;
}
.container {
  display: flex;
}
.container > div {
  
}
.left-pane {
    height: 100%;
    background-color: #5897fb;
    flex-basis: 100px;
}
.mid-pane {
    height: 100%;
    margin: 0;
    padding: 10px;
    flex: 0 1 80%;
}
.right-pane {
    height: 100%;
    background-color: #ffefef;
    flex: 0 1 100px;
}