JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position:fixed;;" class="hex2"></div>
<div style="position:fixed;left:9px;top:9px" class="hex"></div>

CSS

.hex:before {
    content: " ";
    width: 0; height: 0;
    border-bottom: 30px solid #fff;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    position: absolute;
    top: -30px;
}

.hex {
    margin-top: 30px;
    width: 104px;
    height: 60px;
    background-color: #fff;
    position: relative;
}

.hex:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -30px;
    border-top: 30px solid #fff;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}

.hex2:before {
  content: " ";
    width: 0; height: 0;
    border-bottom: 30px solid #000;
    border-left: 52px solid transparent;
    border-right: 54px solid transparent;
    position: absolute;
    top: -30px;
}

.hex2 {
    margin-top: 30px;
    width: 106px;
    height: 62px;
    background-color: #000;
    position: relative;
}

.hex2:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -32px;
    border-top: 32px solid #000;
    border-left: 54px solid transparent;
    border-right: 52px solid transparent;
}