JSFiddle - React, Tailwind, and code Playground

HTML

<figure></figure>

CSS

figure{
    width:320px;
    height:64px;
    background:blue; 
    position:relative;
    margin:40px auto;
}

figure:before, figure:after{
    content:'';
    position:absolute;
    display:block;
    left: -40px;
    width:0;
    height:0;
}

figure:before{
    top: 0;
    border-top: 32px solid blue;
    border-left: 40px solid transparent;
    border-right: 0px solid transparent;
}

figure:after{
    bottom: 0;
    border-bottom: 32px solid blue;
    border-left: 40px solid transparent;
    border-right: 0px solid transparent;
}