JSFiddle - React, Tailwind, and code Playground

by k_sav

HTML

<div class="container">
<div class="one">
    <div class="main-one"></div>
    <div class="common"></div>
    <div class="common"></div>
    <div class="common"></div>
</div>
<div class="two">
    <div class="main-two"></div>
    <div class="common"></div>
    <div class="common"></div>
    <div class="common"></div>
</div>
<div class="three">
    <div class="main-three"></div>
    <div class="common"></div>
    <div class="common"></div>
    <div class="common"></div>
</div>

</div>

CSS

.container {
  width: 371px;
  height: 100%;
  border: 2px solid black;
  display: flex;
  flex-direction: row;
}

.one {
  background: red;
  width: calc(100% / 3);
  height: 100%;
}

.two {
  background: yellow;
  width: calc(100% / 3);
  height: 100%;
}

.three {
  background: cyan;
  width: calc(100% / 3);
  height: 100%;
}

.main-one,
.main-two,
.main-three {
  background: black;
  width: 100%;
  height: 30px;
}

.main-one {
    background: green;
}

.main-two {
    background: black;
}

.main-three {
  background: brown;
}

.common {
  width: 100%;
  height: 30px;
  border-top: 1px solid black;
}

.common:nth-child(4n) {
  border-bottom: 1px solid black;
}