JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<br>
<br>
<div class="holder"> 
    <span class="s-center">
        <span class="ss-center">
          <span class="s-left"> &nbsp; </span>
          <span class="s-right"> &nbsp; </span>
        </span>   
    </span> 
</div>

CSS

* {
    padding:0;
    margin:0;
}
.holder {
    height:40px;
    background:red;
    text-align:center;
    position:relative;
    font-size:62.5%;
     position:relative;
}
.s-center {
    padding:10px 0;
    font-size:17px;
    line-height:40px; 
}

.ss-center {
     position:relative;
     padding:10px 15px;
    background:silver;
}

.s-left, .s-right {
position:absolute;   
height:40px;width:30px;
background:cyan;    
}

.s-left {left:-30px;}
.s-right {right:-30px;}