JSFiddle - React, Tailwind, and code Playground

by Shaan Singh

HTML

<div class="hex">
    <div class="hex inner">
    </div>
</div>

CSS

.hex {
    margin-top: 70px;
    width: 208px;
    height: 120px;
    background: #000;
    position: relative;
}
.hex:before, .hex:after {
    content:"";
    border-left: 104px solid transparent;
    border-right: 104px solid transparent;
    position: absolute;
}
.hex:before {
    top: -60px;
    border-bottom: 60px solid #000;
}
.hex:after {
    bottom: -60px;
    border-top: 60px solid #000;
}
.hex.inner {
    background-color: rgba(23,86,130,0.5);
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    transform: scale(.8, .8);
    z-index:1;
}
.hex.inner:before {
    border-bottom: 60px solid rgba(23,86,130,0.5);
}
.hex.inner:after {
    border-top: 60px solid rgba(23,86,130,0.5);
}