JSFiddle - React, Tailwind, and code Playground

HTML

<div class="center contentbox">
    <div class="contentbox_header"></div>
        <div class="contentbox_body">
           <div id="box">
                <div>
                    <div class="header_side header_left"></div>
                    <div class="header_middle header_middle_left">Some news headline here</div>
                    <div class="header_middle header_middle_right">date or so</div>
                    <div class="header_side header_right"></div>
                    <div class="clear"></div>
                </div>
                <div>
                    <div class="body">
                        test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
                        test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
                        test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
                        test<br>test<br>test<br>test<br>test<br>test<br>test<br>
                        test<br>test<br>test<br>test<br>
                    </div>
                    <div class="clear"></div>
                </div>
                <div>
                    <div class="footer_side footer_left"></div>
                    <div class="footer_middle"></div>
                    <div class="footer_side footer_right"></div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    <div class="contentbox_footer"></div>
</div>

CSS

div.center {
    margin-left: auto;
    margin-right: auto;
    width: 1024px;
    height: 100%;
}

div.clear {
    clear: both
}

div.contentbox {
    background-color: #ffffff
}

div.contentbox_header {
    height: 16px;
    background-image: url(http://www.riddimbase.net/images/contentbox_header.gif);
    background-repeat: no-repeat
}

div.contentbox_body {
    min-height: 600px;
    /*background-image: url(http://www.riddimbase.net/images/contentbox_body.gif);
    background-repeat: repeat-y;*/
    background-color: blue;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 25px;
    padding-right: 25px
}

div.contentbox_footer {
    height: 16px;
    /*background-image: url(http://www.riddimbase.net/images/contentbox_footer.gif);
    background-repeat: no-repeat*/
    background-color: blue
}

div.advertisment_spacer {
    height: 25px;
}

#box {
    width: 650px;
    height: 35px
}

#box .header_side {
    width: 2px;
    height: 35px;
    float: left;
    background-repeat: no-repeat
}

#box .header_left {
    background-image: url(http://riddimbase.net/images/box_header_left.gif);
}

#box .header_right {
    background-image: url(http://riddimbase.net/images/box_header_right.gif);
}

#box .header_middle {
    float: left;
    background-image: url(http://riddimbase.net/images/box_header_middle.gif);
    background-repeat: repeat-x;
    height: 35px;
    line-height: 36px;
    text-shadow: 0 1px 0 #f3f3f3;
    font-weight: bold;
    color: #4f5a6e
}

#box .header_middle_left {
    width: 446px;
    padding-left: 20px;
}

#box .header_middle_right {
    width: 160px;
    padding-right: 20px;
    font-size: 0.8em;
    text-align: right
}

#box .body {
    border-left: 1px solid #acb2b8;
    border-right: 1px solid #acb2b8;
    width: 648px;
    min-height: 150px;
    float: left;
    background-color: #f4f4f6
}

#box .footer_side {
    width: 2px;
    height: 2px;
    float: left;
    background-repeat: no-repeat
}

#box .footer_left {
   ...