JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<body>
  <div class="container">
    <div class="header"></div>
    <div class="col-container">
      <div class="col-1"></div>
      <div class="col-2"></div>
      <div class="col-3"></div>
    </div>
  </div>
</body>

CSS

body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100%;
}

.header {
  height: 150px;
  background-color: red;
}

.col-container {
  widows: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  height: calc(100vh - 150px);
}

.col-1 {
  flex: 1 1 33.333%;
  background-color: green;
}

.col-2 {
  flex: 1 1 33.3333%;
  background-color: blue;
}

.col-3 {
  flex: 1 1 33.3333%;
  background-color: yellow;
}