<div class="waffle">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

*{
  margin:0;
}

body{
  background: radial-gradient(#9b59b6, #8e44ad);
  width:100%;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.waffle{
  box-shadow:0 0 100px 50px rgba(0,0,0,.3);
  background:rgb(245,208,111);
  width:20vw;
  height:30vw;
  border-radius:2vw;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  padding:1vw;
  position:relative;
}

.waffle::after{
  content:'';
  width:50%;
  background:rgba(0,0,0,.1);
  position:absolute;
  height:100%;
  right:0;
  top:0;
  border-radius: 0 2vw 2vw 0;
}

.waffle div{
  background:rgb(234,165,0);
  width:80%;
  height:80%;
  margin:10% 0 0 10%;
  border-radius:1vw;
  box-shadow: inset 1vw 1vw rgb(231,119,6);
  position:relative;
}

.waffle div::after{
  content:'';
  position:absolute;
  width:1vw;
  height: 2vw;
  background:rgba(255,255,255,.1);
  bottom:1vw;
  right:1vw;
  border-radius:.2vw;
}