JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display:block;">
<div class="hexagon" style="left:50px; top:50px"><div>1.1</div></div>
<div class="hexagon" style="left:160px; top:-5px"><div>1.2</div></div>
<div class="hexagon" style="left:270px; top:-60px"><div>1.3</div></div>

    <div class="hexagon" style="left:105px; top:-25px"><div>2.1</div></div>
    <div class="hexagon" style="left:215px; top:-80px"><div>2.2</div></div>
    
<div class="hexagon" style="left:50px; top:-45px"><div>3.1</div></div>
<div class="hexagon" style="left:160px; top:-100px"><div>3.2</div></div>
<div class="hexagon" style="left:270px; top:-155px"><div>3.3</div></div>
</div>

CSS

.hexagon {
    width: 100px;
    height: 55px;
    background: red; /*url(http://xenotex.com/lj/500/sky_leafs_cut500.jpg);*/
    position: relative;
    color:white;    
}
.hexagon div { padding:1em; font-weight:bold; font-family: Arial;}
.hexagon:before {
    content: "";
    position: absolute;
    top: -25px; 
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
}
.hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px; 
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
}