JSFiddle - React, Tailwind, and code Playground

by Marc Malignan

HTML

<div class="grid">
  <div class="cell title">HENRY MALINEANU</div>
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>
  <div class="cell">13</div>
  <div class="cell">14</div>
  <div class="cell">15</div>
</div>

CSS

body {
  font-family: Arial;
  margin: 0;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 16.666%;
  background: #aaa;
}

.cell.title {
  flex-basis: 50%;
  background: #111;
  color: white;
}

@media screen and (max-width: 600px) {
  .grid {
    height: auto;
  }
  .cell {
    height: 100px;
    flex-basis: 50%;
  }
  .cell.title {
    flex-basis: 100%;
  }
}