JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<div class="hexxagon">
</div>

SCSS

.hexxagon {
    $size: 10px;
    width: $size;
    height: 3px;
    position: relative;
    top: 140px;
    left: 140px;
    vertical-align: super;
    box-shadow: 0 -$size 0 0 #b59, 0 $size 0 0 #b59, 0 -$size + 4px 0 0 #b59, 0 $size - 4px 0 0 #b59, 0 -$size + 8px 0 0 #b59, 0 $size - 8px 0 0 #b59;
    &:before, &:after {
        position: absolute;
        top: 0;
        left: 0;
        width: $size;
        height: 3px;
        content: '';
        box-shadow: inherit;
    }
    &:before {
        transform: rotate(60deg);
    }
    &:after {
        transform: rotate(120deg);
    }
}