JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.hexagon {
    margin-top:200px;
    margin-left:200px;
    width:100px;
    height:200px;
    background-color:white;
    border-left:3px solid orange;border-right:3px solid orange;
    position:relative;
    border-radius:10px;
}

.hexagon:after, .hexagon:before {
    z-index:-1;
    top:-33px;
    content:"";
    position:absolute;
    width:75px;
    height:75px;
    transform:rotate(45deg);
    -ms-transform:rotate(45deg); 
    -webkit-transform:rotate(45deg); 
    border-left:3px solid orange;border-top:3px solid orange;
    left:11px;
    border-radius:10px;
}

.hexagon:before {
    top:156px;
     transform:rotate(-135deg);
    -ms-transform:rotate(-135deg); 
    -webkit-transform:rotate(-135deg); 
}