JSFiddle - React, Tailwind, and code Playground

by zeen

HTML

<div class="container">
    <div class="hex hex-1"></div>
    <div class="hex hex-2"></div>
    <div class="hex hex-3"></div>
    <div class="hex hex-4"></div>
    <div class="hex hex-5"></div>
    <div class="hex hex-6"></div>
    <div class="hex hex-7"></div>
</div>

CSS

.hex {
    float: left;
    width: 100px;
    height: 50px;
    background:red;
    position: relative;
    margin-top: 28px;
    margin-bottom: 28px;
    
    border-left: solid 1px #333333;
    border-right: solid 1px #333333;
}

.hex:before,
.hex:after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 71px;
    height: 71px;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    -ms-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    background-color: inherit;
    left: 14px;
}

.hex:before {
  top: -35px;
  border-top: solid 1.4px #333333;
  border-right: solid 1.4px #333333;
}

.hex:after {
  bottom: -35px;
  border-bottom: solid 1.4px #333333;
  border-left: solid 1.4px #333333;
}

.container {
    width: 306px;
}