JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hexagon">
    <span class="top"></span>
    <span class="middle"></span>
    <span class="bottom"></span>
</div>
<style>
    .top {
        height:0;
        width:0;
        display: block;
        border:20px solid red;
        border-top-color:transparent;
        border-right-color:transparent;
        border-bottom-color:red;
        border-left-color:transparent;
    }

    .middle {
        height: 20px;
        background: red;
        width: 40px;
        display: block;
    }
    .bottom {
        height:0;
        width:0;
        display: block;
        border:20px solid red;
        border-top-color:red;
        border-right-color:transparent;
        border-bottom-color:transparent;
        border-left-color:transparent;
    }
</style>