JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hexagon">

</div>

CSS

.hexagon {
    position: relative;
    overflow: hidden;
    background: transparent;
    width: 10em;
    height: 10em;
    transform: rotate(-30deg) skewX(30deg) scaleY(.866);
}

.hexagon:before {
    position: absolute;
    right: 6.7%;
    bottom: 0;
    left: 6.7%;
    top: 0;
    transform: scaleY(1.155) skewX(-30deg) rotate(30deg);
    background: chartreuse;
    content: '';
}