JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
	<div class="hex">
		<div class="top"></div>
		<div class="bottom"></div>
	</div>
</div>

CSS

*{
	margin: 0;
	padding: 0;
	border: none;
}

body{
	padding: 200px;
}

.hex{
	width:150px;
	height:86px;
	background: url('http://ob-a.com/img/2014/05/hd-nature-4398-wallpapers-1920x1080-4398.jpg') no-repeat;
	background-size: auto 173px;
	background-position: 50% 50%;
	position: relative;
	zoom: 1;
}

.top, .bottom{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: inherit;
    z-index: -1;
    overflow: hidden;
}

.top{
	-webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
}

.bottom{
	-webkit-transform: rotate(-60deg);
	-moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.top:before, .bottom:before{
	width: 173px;
	height: 173px;
	content: '';
	position: absolute;
	background: inherit;	
	top: 0;
	left: 0;	
}

body .top:before{
	-webkit-transform: rotate(-60deg) translate(-87px, 0px);
    -moz-transform: rotate(-60deg) translate(-87px, 0px);
    -ms-transform: rotate(-60deg) translate(-87px, 0px);
    -o-transform: rotate(-60deg) translate(-87px, 0px);
    transform: rotate(-60deg) translate(-87px, 0px);
    -webkit-transform-origin: 0 0;
	  -moz-transform-origin: 0 0;
	  -ms-transform-origin: 0 0;
	  -o-transform-origin: 0 0;
	  transform-origin: 0 0;
}

body .hex .bottom:before{
	-webkit-transform: rotate(60deg) translate(-48px, -11px);
    -moz-transform: rotate(60deg) translate(-48px, -11px);
    -ms-transform: rotate(60deg) translate(-48px, -11px);
    -o-transform: rotate(60deg) translate(-48px, -11px);
    transform: rotate(60deg) translate(-48px, -11px);
}