JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex numbers">
  <input type="checkbox" class="block bShadow-1">
  <input type="checkbox" class="block bShadow-2">
  <input type="checkbox" class="block bShadow-3">
  <input type="checkbox" class="block bShadow-4">
</div>

CSS

.flex {
  display: flex;
}
.block {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 20px;
  border: 0;
  background: #fff !important;
}
.block::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #fff;
}
.bShadow-1{-webkit-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);-moz-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);}
.bShadow-2{-webkit-box-shadow:0 0 20px 0 rgba(150,150,150,.1);-moz-box-shadow:0 0 20px 0 rgba(150,150,150,.1);box-shadow:0 0 20px 0 rgba(150,150,150,.1);}
.bShadow-3{-webkit-box-shadow:0 20px 60px -10px rgba(0,0,0,.1);-moz-box-shadow:0 20px 60px -10px rgba(0,0,0,.1);box-shadow:0 20px 60px -10px rgba(0,0,0,.1);}
.bShadow-4{-webkit-box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);-moz-box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);}