JSFiddle - React, Tailwind, and code Playground

by maxelcat

HTML

<div class="hpGridTopRow">
  <span class="hpBox lightBlue one">
    <p class="hbBoxesp">New to Restore</p>
  </span>
  <span class="hpBox green two">
    <p class="hbBoxesp">Events</p>
  </span>
  
  <span class="hpBox midBlue three">
    <p class="hbBoxesp">Talks</p>
  </span>

</div>

CSS

.hpGridTopRow, 
.hpGridBottomRow {
display: -webkit-flex;
    display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;

		position: relative;
	padding-bottom: 20%;
	height: 0;
	overflow:hidden;
	background:yellow;
}

.hpBox {	
	width:24.18803418803419%;
	text-align:center;
	height:264px;
	height:100%;
	
}

.hpBox.one {
	
	width:49.4017094017094%;
}



.lightBlue {
	background:#15b2d2;
}

.green {
	background:#8cc63f;
}

.midBlue {
	background:#6a8aa8;
}

.orange {
	background:#fcb040;
}

.darkBlue {
	background:#155fa8;	
}

.red {
	background:#f1592a;	
}



.hbBoxesp {
	color:#fff;
	margin-top:40px;
}