JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top">
    <div class="top_left"></div>
    <div class="top_right"></div>
    <div class="top_cen"></div>
    
</div> 

<br/><br/>

<div class="top">
    <div class="top_left2">2</div>
    <div class="top_right2">2</div>
    <div class="top_cen2">OPCION 2<br>contenido<br>contenido<br>contenido<br>contenido<br>contenido<br>contenido<br>contenido<br>contenido<br></div>
    
</div>

CSS

.top
{
    width:100%;
    height:20px;
}

.top_left
{
    float:left;
    width:20px;
    height:20px;
    background:red url('/Imagenes/top_left.png') no-repeat;
}

.top_cen
{
    height:20px;
    background:blue url('/Imagenes/top_cen.png') repeat-x;
}

.top_right
{
    float:right;
    width:20px;
    height:20px;
    background:green url('/Imagenes/top_right.png') no-repeat;
}






.top_left2
{
    float:left;
    width:20px;
    height:100px;
    background:red url('/Imagenes/top_left.png') no-repeat;
}
.top_cen2{
    background:yellow url('/Imagenes/top_cen.png') repeat-x;
}
.top_right2
{
    float:right;
    width:20px;
    height:100px;
    background:green url('/Imagenes/top_right.png') no-repeat;
}