JSFiddle - React, Tailwind, and code Playground

by rohitazad

HTML

<div id="offer_widget">
    <div class="column">
        <div class="row odd">
            <div class="row_image">
                <a href="#" target="_blank">
                    <img src="http://cdn.escalatenetwork.com/coupons/images/offers/thumbnails/422.gif" border="0" alt="" />
                </a>
            </div>
            <div class="row_text">
                <div class="offer_title">
                    <strong><a href="#" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></strong>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>

CSS

html body div.clear,html body span.clear{background:none;border:0;clear:both;display:block;float:none;font-size:0;height:0;margin:0;overflow:hidden;padding:0;visibility:hidden;width:0;}
.clearfix:after{clear:both;content:'.';display:block;height:0;visibility:hidden;}
* html .clearfix{height:1%;}

#offer_widget {
    font-family: Arial, Arial, Helvetica, sans-serif; font-size: 12px;
    width:300px;
    border:1px solid #eeeeee;
}

#offer_widget .column {
    float:left;
}

#offer_widget .row {
    padding:5px 0;
    min-height:100px;
}

#offer_widget .even {
    background:#ffffff;
}

#offer_widget .odd {
    background:#f6f6f6;
display: table;    
}

#offer_widget .row_image {
    max-width: 100px;
margin-right: 5px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#offer_widget .row_text {
    max-width: 195px;
color: #505050;
display: table-cell;
vertical-align: middle;
text-align: center;
}

#offer_widget .offer_title {

}

#offer_widget .offer_title a {
    color:#0584bc; font-weight:bold; text-decoration:none;
}