JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div class="concave">Some text</div>

CSS

.concave {
    position: relative;
    width: 10em;
    height: 3em;
    line-height: 3em;
    margin: 1em auto;
    padding: 0.5em;
    background-color: #00f;
    color: #fff;
}

.concave::before {
    content: '';
    position: absolute;
    top: -1em;
    left: -1em;
    border: 1em solid #fff;
    border-radius: 1em;
}

.concave::after {
    content: '';
    position: absolute;
    bottom: -1em;
    left: -1em;
    border: 1em solid #fff;
    border-radius: 1em;
}