JSFiddle - React, Tailwind, and code Playground

HTML

<div class="roundHex"></div>

CSS

.roundHex {
    position:relative;
    margin:0 auto;
    background:transparent;
    border-radius:10px;
    height:300px;
    width:180px;
    box-sizing:border-box;
    transition:all 1s;border:10px solid transparent;
    border-top-color:black;
    border-bottom-color:black;
}
.roundHex:before,.roundHex:after {
    content:"";
    border:inherit;
    position:absolute;
    top:-10px;
    left:-10px;
    background:inherit;
    border-radius:inherit;
    height:100%;
    width:100%;
}
.roundHex:before{
      transform:rotate(60deg);
}
.roundHex:after{
      transform:rotate(-60deg);
}