JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="box-wrap">
    <div class="left-side"></div>
    <div class="middle">Lorem</div>
    <div class="right-side"></div>
</div>

<div class="box-wrap">
    <div class="left-side"></div>
    <div class="middle">Lorem ipsum</div>
    <div class="right-side"></div>
</div>


<div class="box-wrap">
    <div class="left-side"></div>
    <div class="middle">Lorem ipsum dolor</div>
    <div class="right-side"></div>
</div>


<div class="box-wrap">
    <div class="left-side"></div>
    <div class="middle">Lorem ipsum dolor sit</div>
    <div class="right-side"></div>
</div>


<div class="box-wrap">
    <div class="left-side"></div>
    <div class="middle">Lorem ipsum dolor sit amet</div>
    <div class="right-side"></div>
</div>

CSS

.box-wrap { 
    float: left; 
    clear: both;
    margin: 5px;
}

.middle { 
    float: left;
    background: url('http://s17.postimage.org/4z6963mxn/middle_slide.png') repeat-x top left;
    height: 50px;
    line-height: 50px;
    color: #fff;
}

.left-side,
.right-side {
  background-image: url('http://s17.postimage.org/lphmvflcr/rounded_sides.png');
  background-repeat: no-repeat;
  width: 11px;
  height: 50px;
  float: left;
}

.left-side { background-position: top left; }
.right-side { background-position: top right; }