JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <span>
        <div class="hexagon"> </div>
    </span>
    <span>
        <div class="hexagon"> </div>
    </span>
    <span>
        <div class="hexagon"> </div>
    </span>
</div>

CSS

.container {
        padding-top: 80px;
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .container span {
        line-height: 129px;
        display: inline-block;
    }
    
    .container .hex {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

.hexagon { width: 100px; height: 55px; background: red; position: relative; } .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; }