JSFiddle - React, Tailwind, and code Playground

by hobobne

HTML

<div id="push_down"></div>

<div id="global_wrapper">
    <table cellpadding="0" cellspacing="0" border="0" id="sep_table">
        <tr>
            <td id="side_1" class="sides">side 1<td>
            <td id="main">main</td>
            <td id="side_2" class="sides">side 2</td>
        </tr>
    </table>
</div>

CSS

html, body {margin: 0px; padding: 0px;}

#push_down {padding-top: 30%;}
#global_wrapper {border: 2px dotted red;}

#sep_table {margin: 0px auto; width: 100%;}
    #side_1,
    #side_2{border: 2px dotted green;}

    #side_1 {background: url('image_1.png') center no-repeat;}
    #main {width: 300px; border: 2px dotted blue;}
    /* you can change the width to 989px */
    #side_2 {background: url('image_2.png') center no-repeat;}