JSFiddle - React, Tailwind, and code Playground

HTML

<div class="small">
    <div class="box">
        <div class="title"><h2>Box title</h2></div>
        <div class="content">
            <div class="progressbar"></div>
        </div>
    </div>
</div>

CSS

.section{
    float : left;
    width : 100%;
}
.small{
    float : left;
    width : 25%;
    *width : auto;
    *max-width : 25%;
    *min-width : 24.9%;
}

.box{
    display : block;
    *zoom : 1;
    border : 1px solid #c3d0e1;
    margin : 20px 0 0 20px;
}

.section div:first-child .box{
    margin : 20px 0 0 0;
}

.box .title{
    display : block;
    background : url(http://www.dreamwire.nl/themes/test/gfx/box-title.gif) repeat-x left top transparent;
    border-bottom : 1px solid #e2e5e8;
    border-left : 1px solid #FFFFFF;
    border-right : 1px solid #FFFFFF;
    padding : 10px 0 0 0;
    height : 24px;
}

.box .title h2{
    float : left;
    padding : 0 10px 0 10px;
    font: 14px 'MuseoSans700', Arial;
    color : #002e68;
    line-height : 1.0em;
    text-transform : uppercase;
    font-weight : 100;
}

.box .content{
    display : block;
    background-color : #FFFFFF;
    border : 4px solid #f2f4f7;
    padding : 15px;
}

.progressbar {
    display : block;
    *zoom : 1;
    border: 1px solid #C3D0E1;
    padding : 0 1px;
    text-align : left;
    width : 100%;
    height : 29px;
}