JSFiddle - React, Tailwind, and code Playground

by Samir Raut

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="firstLevel">
  <div class="box">Sports</div>

</div>
<div class="secondLevel">
  <div class="box a">NBA</div>
  <div class="box b">NFL</div>
  <div class="box c">NHL</div>
  <div class="box d">IPL</div>
  <div class="box e">MLB</div>
  <div class="box f">MLS</div>
</div>

CSS

body {
  margin: 10px;
}
.firstLevel {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 200px;
  background-color: #fff;
  color: #444;
  margin-bottom: 20px;
}

.firstLevel > .box{
    background-color: red;
}

.secondLevel > .box{
    background-color: gray;
}

.secondLevel {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 200px 200px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  color: #fff;
  padding: 20px;
  font-size: 150%;
}