JSFiddle - React, Tailwind, and code Playground

HTML

<div class='hexagon'><img width="100" src='https://client.work-zilla.com/images/avatar.png'></div>

CSS

.hexagon {
    width: 100px;
    height: 55px;
    background: #38006d;
    position: relative;
    margin: 10px auto;
    margin-top: 5em;
}
 
.hexagon:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid #38006d;
}
 
.hexagon:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid #38006d;
}