JSFiddle - React, Tailwind, and code Playground

HTML

<!-- content to be placed inside <body>…</body> -->
<div class='row'>
	<div class='hexagon newcol'></div>
    <div class='hexagon shifted'></div>
</div>

CSS

/**
 * Generate repeating hexagonal pattern with CSS3 (SO) - 1 element/ hexagon !!!
 * http://stackoverflow.com/q/10062887/1397351
 */
* { box-sizing: border-box; margin: 0; padding: 0; }
/*.row { margin: -18.5% 0; text-align: center; }
.row:first-child { margin-top: 2.25%; }
*/
.hexagon {
position: relative;
display: inline-block;
overflow: hidden;
margin: 0 8.5%;
/*padding: 60% 30%;*/
    height: 400px;
width: 175px;
/* transform: rotate(30deg) skewY(30deg) scaleX(.866); */
transform: scaleX(.8)scaleY(.4)rotate(90deg);
/* background: red; */
    position: absolute;
    top: -150px;
    
}
.hexagon:before, .content:after {
display: block;
position: absolute;
top: 50px;
right: 0;
bottom: 50px;
left: 0;
transform: scaleX(3.155) skewY(-30deg) rotate(-30deg);
background: linear-gradient(30deg,rgb(58, 154, 229),rgb(82, 224, 224));
background-size: cover;
content: '';
}
.newcol
{
    top:-130px
}
.newcol:before, .content:after
{
background: linear-gradient(30deg,rgba(240, 27, 78, 1),rgb(224, 82, 167));
}
.shifted
{
    top: -115px;
left: 20px;
}
.shifted:before
{
    background: linear-gradient(30deg,rgba(58, 154, 229, 0.43),rgba(82, 224, 196, 0.79));
    background-blend-mode: multiply;
}