JSFiddle - React, Tailwind, and code Playground

by slym12

HTML

<div class="container">




<div class="rect orange endCustomer"></div>
<div class="square blue people"></div>
<div class="scope green"></div>

<div class="flex">
<div class="square blue status"></div>
<div class="square green health"></div>
<div class="square orange costCentres"></div>
</div>


<div class="timeline orange"></div>

</div>

CSS

.container {
  display: grid;
  grid-gap: 8px;
  grid-template-columns: repeat(5,minmax(300px, 1fr));
  /* flex-wrap: wrap; */
}

.flex {
  display: flex;
  grid-column-end: span 3;  /* this still requires manual check if any child tiles rendered... unless done like (statusPermitted || healthPerm || ccPerm) && <flex.../> */
  gap: 8px;
}

.flex > * {
  flex-grow: 1;
}

.basis>* {
  flex-basis: 300px;
  flex-grow: 1;
}


.square {
  min-width: 200px;
  height: 200px;
}

.rect {
  min-width: 300px;
  height: 200px;
}

.scope {
  min-height: 400px;
  min-width: 320px;
  grid-column: 4/span 2;
  grid-row: 1/span 2;
  /* grid-area: scope; */
}

.timeline {
  height: 200px;
  min-width: 350px;
}

.blue {
  background: blue;
}

.green {
  background: green;
}

.orange {
  background: orange;
}

.endCustomer {
  /* grid-area: endCustomer; */
  flex-basis: 60%;
  grid-column: 1/3;
}

.people {
  flex-basis: 39%;
}

.projectStatus {
  flex-basis: 30%;
}

.health {
  flex-basis: 25%;
}

.costCentres {
  flex-basis: 40%;
}