JSFiddle - React, Tailwind, and code Playground
HTML
<table id="banner-table">
<td id="left-image"></td>
<td id="center-image"></td>
<td id="right-image"></td>
</table>
CSS
#banner-table {
width: 100%;
height: 200px;
padding: 0;
margin: 0;
border-collapse: collapse;
table-layout: fixed;
}
#left-image {
background-image: url(http://www.dummyimage.com/100x200/ff0303/ffffff.png&text=Left);
background-position: right;
background-repeat: repeat-x;
}
#center-image {
width: 400px;
background-image: url(http://www.dummyimage.com/400x200/0021fa/ffffff.png&text=Center);
background-position: center;
background-repeat: no-repeat;
}
#right-image {
background-image: url(http://www.dummyimage.com/100x200/1f9900/ffffff.png&text=Right);
background-position: left;
background-repeat: repeat-x;
}