JSFiddle - React, Tailwind, and code Playground

by akhurshid

HTML

<div id="main">
      <div class="main-holder">
    <div class="content clearfix">
                <div class="section">
                    <div class="sector">
                        <div class="wrapper">
                            <img class="alignleft" src="img-11.png" width="167" height="167" alt="image description">
                            <div class="description">                
                                                    <ul class="defaultlist fl no-margin">
                                <li><a href="#">list item</a></li>
                                <li><a href="#">list item</a></li>
                                <li><a href="#">list item</a></li>
                                
                                <li><a href="#">list item</a></li>
                                <li><a href="#">list item  </a></li>
                            </ul>
                            <ul class="social-about fl">
                                <li class="fb-link"><a href="#" target="_blank">Follow us on Facebook</a><div>3 lakh active followers</div></li>
                                <li class="twitter-link"><a href="#" target="_blank">Follow us on Twitter</a></li>
                            </ul>
<br style="clear:both">
                            <small class="clearfix" style="color:#999; font-size:11px; margin-top:20px !important">Some disclaimer here</small>
                            </div>        
                                    
                        </div>
                    </div>
                </div>
</div>
</div>
</div>

CSS

/*Contanier*/
.twocolums { width: 100%; }

.twocolums:after { content: ""; display: block; clear: both; }

/*Content*/
.twocolums .content { width: 620px; float: left; margin: 0 10px 0 0; }

/*Sidebar*/
.twocolums .sidebar { width: 300px; float: right; overflow: hidden; padding: 0 0 0 0; }

/*season-box*/
.winner2 { background: url(../images/winner2.gif) no-repeat 0 10px; padding: 5px 0 5px 25px; font: normal 14px/18px "Droid Sans"; color: #666; display: block; margin: 0 0 10px 0; border-top: 1px solid #f8f7f8; border-bottom: 1px solid #f8f7f8; }

.winner2 strong.title { font-weight: normal; font-family: 'Droid Sans'; }

.winner2 em { display: block; font-size: 14px; font-style: normal; }

.nopad { padding: 20px 0 16px 18px !important; }

.smalltop-dest ul li h5 { margin: 0; font: bold 14px/16px "Droid Sans"; }

.facebook-box { margin: 0 0 20px 0; }

/*Content*/
#main { padding: 0 0 65px 0; }

#main h2 { color: #666; letter-spacing: 2px; margin: 0 0 10px 0; font: normal 16px/20px "Droid Serif"; border-bottom: 1px solid #f4f4f4; padding: 0 15px 10px 0; text-transform: uppercase; }

#main .recomended { color: #999; display: block; font: 16px/18px "Droid Sarif"; letter-spacing: 3px; margin: 0 0 15px; }

#main .option { color: #999; display: block; font: 16px/18px "Droid Sans"; margin: 0 0 15px; }

#main .sidebar .option { color: #999; display: block; font: 14px/18px "Droid Sans"; margin: 0 0 15px; }

#main h3.level3 { color: #666; font: 16px/18px "Droid Sarif"; letter-spacing: 3px; margin: 0; }

#main .sidebar h3.level3 { color: #999; font: 14px/16px "Droid Sarif"; letter-spacing: 3px; margin: 0; }

.sidebar h2 { border-bottom: 0 !important; }

.left-box { width: 308px; float: left; overflow: hidden; }

.left-box .trip-img { float: left; margin: 0 12px 0 0; }

.left-box .locate { font-size: 14px; color: #999; font-style: normal; margin: 0 0 12px 0; display: block; }

.rating { margin: 0 0 8px 8px; width: 117px; float: left; }

.caption .tag { display: block;...