JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer"><div class="middle"><div class="wrap"> <!-- Open .wrap -->

  <div class="box side left"><!-- Open .box -->
    <a href="#" class="boxInner innerLeft"><!-- Open .boxInner -->
    </a><!-- Close .boxInner -->
  </div><!-- Close .box -->

  <div class="box"><!-- Open .box -->
    <a href="#" class="boxInner innerMiddle"><!-- Open .boxInner -->
    </a><!-- Close .boxInner -->
  </div><!-- Close .box -->
  
  <div class="box side right"><!-- Open .box -->
    <a href="#" class="boxInner innerRight"><!-- Open .boxInner -->
    </a><!-- Close .boxInner -->
  </div><!-- Close .box -->
  
  </div></div></div><!-- Close .wrap -->

</body>

CSS

body {
	margin: 0;
	padding: 0;
	background-color:#1b1b1b;
}

.outer{
	display: table;
	position: absolute;
	height: 100%;
	width: 100%;
}
.middle{
	display: table-cell;
	vertical-align: middle;
}
.wrap {
	margin: 10px;
	margin-left: auto;
	margin-right: auto; 
	height:100%;
	overflow: hidden;
	
	
	-webkit-box-align:center;
	-webkit-box-pack:center;
	display:-webkit-box;
}

.box {
	float: left;
	position: relative;
	width: 24.45%;
	padding-bottom: 24.45%;
	
	margin:auto;
	
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	
	-webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.side {
	width: 17.57%;
	padding-bottom: 17.57%;
}

.left{
	left:-8%;
}

.right{
	left:8%;
}

.boxInner {
	position: absolute;
	left: 10px;
	right: 10px;
	top: 10px;
	bottom: 10px;
	overflow: hidden;
	
	background-size: cover;
	background-repeat:no-repeat;
}

.innerLeft{
	background-color:blue;
}
.innerMiddle{
    background-color:blue;
}
.innerRight{
	background-color:blue;
}