JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Button</title>

</head>

<body style="background-color:#cccccc;">

<div class="button">
    <div class="rightCap cap"></div>
    <div class="leftCap cap"></div>

    ** BUTTON TEXT HERE **
</div>

</body>
</html>

CSS

.button {
margin-left: 8px;
margin-right: 8px;    
    background-color: blue;
    height: 33px;
    line-height: 33px;
    font-size: 33px;
    position: relative;
    float: left;
}

.button .cap {
 position: absolute;
background-color: red;
width: 8px;    
    height: 33px;
}
.button .leftCap {
    position: absolute;
    left: -8px;
}

.button .rightCap {
    float: right;
    right: -8px;   
}