JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<div class="gridWrapper grid-2x2">
  <div class="gridItem">
    <div class="centeredWrapper">
      <div class="iconWrapper"></div>
      <div class="iconSubtext">Multiplication Facts</div>
    </div>
  </div>
  <div class="gridItem">a</div>
  <div class="gridItem">a</div>
  <div class="gridItem">a</div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700);

html, body {
  background:white;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
.grid-2x2 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.gridWrapper {
  background:black;
  display:flex;
  width:100%;
  height:100%;
}
.gridItem {
  display:flex;
  justify-content:center;
  align-items:center;
  background:#263238;
  flex-basis:50%;
  cursor:pointer;
  
  transition:0.15s ease-in;
}
.gridItem:hover {
  box-shadow: inset 0 0 0 8px #CDDC39;
  transition:0.15s ease-out;
}
.centeredWrapper {
  text-align:center;
}
.iconWrapper {
  display:inline-block;
  width:160px;
  height:160px;
  background:rgba(0,0,0,0.2);
}
.iconSubtext {
  font-family: 'Droid Serif', serif;
  font-weight:bold;
  font-size:18px;
  color:#CDDC39;
}