JSFiddle - React, Tailwind, and code Playground

by LimitedWard

HTML

<div class="hexGrid">
    <div class="row">
        <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis amet voluptas tenetur similique maxime cumque iusto distinctio voluptatum excepturi. Quisquam dolor error quibusdam facere libero sint provident ex suscipit? Provident.</div>
        <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi sequi quam blanditiis ad consequatur facilis mollitia deserunt enim ipsum id quidem molestiae hic natus odit laudantium nesciunt maxime quos quasi.</div>
    </div>
<div class="row">
        <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis amet voluptas tenetur similique maxime cumque iusto distinctio voluptatum excepturi. Quisquam dolor error quibusdam facere libero sint provident ex suscipit? Provident.</div>
        <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi sequi quam blanditiis ad consequatur facilis mollitia deserunt enim ipsum id quidem molestiae hic natus odit laudantium nesciunt maxime quos quasi.</div>
    </div>
    <div class="row">
        <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis amet voluptas tenetur similique maxime cumque iusto distinctio voluptatum excepturi. Quisquam dolor error quibusdam facere libero sint provident ex suscipit? Provident.</div>
        <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi sequi quam blanditiis ad consequatur facilis mollitia deserunt enim ipsum id quidem molestiae hic natus odit laudantium nesciunt maxime quos quasi.</div>
    </div>
    <div class="row">
        <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis amet voluptas tenetur similique maxime cumque iusto distinctio voluptatum excepturi. Quisquam dolor error quibusdam facere libero sint provident ex suscipit? Provident.</div>
        <div class="col">Lorem ipsum dolor sit amet, consectetur...

CSS

.hexGrid {
    color:#fff;
    font-family:arial;
}
.hexGrid .row {
    position:relative;
    clear:both;
    top:50px;
}
/* .hexGrid .row:not(:first-child) {
    padding-left:100px;
    top:103px;
}
.hexGrid .row:nth-child(odd):not(:first-child) {
    padding-left:100px;
    top:156px;
} */
.hexGrid .row:nth-child(even) .col:first-child {
    margin-left:104px;
}
.hexGrid .row .col {
    background:darkgray;
    position:relative;
    float:left;
    width:200px;
    height:111px;
    padding: 0 30px;
    box-sizing:border-box;
    margin-left: 2px;
    margin-right: 2px;
    margin-top:53px;
}
.hexGrid .row .col:before, .hexGrid .row .col:after {
    content:'';
    position:absolute;
    left:0;
    height:0;
    width:0;
    border-left: 100px solid transparent;
	border-right: 100px solid transparent;
}
.hexGrid .row .col:before {
    top:-50px;
	border-bottom: 50px solid darkgray;
}
.hexGrid .row .col:after {
    bottom:-50px;
	border-top: 50px solid darkgray;
}