JSFiddle - React, Tailwind, and code Playground

HTML

<div id="grid">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>
    <div id="five"></div>
    <div id="six"></div>
</div>

CSS

* { 
  padding: 0; 
  margin: 0; 
}

html, body {
  height: 100%; 
}

#grid {
	width:100%;
  min-height: 100%;
  height: 100%;
	display:-webkit-flex;
	display:flex;
}

#one {
  border-right: 1px solid #f8bfde;
  border-left: 1px solid #f8bfde;
  margin-left: 2%;
  margin-right: 1%;
	-webkit-flex:1;
	flex:1;
}

#two {
  border-right: 1px solid #f8bfde;
  border-left: 1px solid #f8bfde;
  margin-left: 1%;
  margin-right: 1%;
	-webkit-flex:1;
	flex:1;
}

#three {
  border-right: 1px solid #f8bfde;
  border-left: 1px solid #f8bfde;
  margin-left: 1%;
  margin-right: 1%;
	-webkit-flex:1;
	flex:1;
}

#four {
  border-right: 1px solid #f8bfde;
  border-left: 1px solid #f8bfde;
  margin-left: 1%;
  margin-right: 1%;
	-webkit-flex:1;
	flex:1;
}

#five {
  border-right: 1px solid #f8bfde;
  border-left: 1px solid #f8bfde;
  margin-left: 1%;
  margin-right: 1%;
	-webkit-flex:1;
	flex:1;
}

#six {
  border-right: 1px solid #f8bfde;
  border-left: 1px solid #f8bfde;
  margin-left: 1%;
  margin-right: 2%;
	-webkit-flex:1;
	flex:1;
}