JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="content">
    <div id="headDiv" role="banner">
        <div id="pageTitle" class="container-fluid text-center"> <span>Offers</span>

        </div>
    </div>
    <div id="mainDiv" role="banner">
        <div class="row">
            <div class="col-sm-4 col-md-4" id="offers">
                <div id="offerOne">
                    <img src="images/images.jpg" class="img-responsive center-block">
                </div>
                <div id="offerTwo">
                    <img src="images/images.jpg" class="img-responsive center-block">
                    <button class="btn btn-primary center-block">View offer</button>
                </div>
                <div id="offerThree">
                    <img src="images/images.jpg" class="img-responsive center-block">
                    <button class="btn btn-primary center-block">View offer</button>
                </div>
            </div>
            <div class="col-sm-8 col-md-8" id="offerDetails">
                <img src="images/left_design.png" class="pull-left img-responsive" id="left_design">
                <img src="images/right_design.png" class="pull-right img-responsive" id="left_design">
                <div class="offer_orange_text">
                    <div class="offer_orange_txt_inner">Bill for Rs. 300 and get any one Burger Free</div>
                </div>
                <div id="claims">312 people have claimed this offer</div>
                <div id="expires">This offer expires on 31 August 2015</div>
                <div id="share">
                    <p>Share this offer on</p>
                    <ul class="share-buttons">
                        <li> <a href="#" target="_blank"><img src="images/Facebook.png"></a>

                        </li>
                        <li id="twitter"> <a...

CSS

html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}
#content {
    height: 100%;
    width: 100%;
    padding: 0;
}
#headDiv {
    box-shadow: 0px 3px 4px #000;
}
#pageTitle {
    background: #C0C0C0 none repeat scroll 0% 0%;
    height: 60px;
}
#pageTitle span {
    display: flex;
    flex-flow: column;
    justify-content: center;
    font-size: 24px;
    padding-top: 1%;
}
#offers {
    margin-top: 0.5%;
    height: 100;
    overflow-y: scroll;
    background: #F6F6F6 none repeat scroll 0% 0%;
}
#offerOne, #offerTwo, #offerThree {
    padding-top: 5%;
    padding-bottom: 5%;
    margin-left: 2.5%;
    margin-top: 5%;
}
#offerTwo:active, #offerThree:active {
    background-color: #F96433;
}
#offerTwo button {
    margin-top: 5%;
}
#offerDetails {
    padding-right: 3%;
}
.offer_orange_text {
    width: 460px;
    padding: 8px;
    background: #B9B60A none repeat scroll 0% 0%;
    float: left;
    margin-top: 10%;
    margin-left: 3%;
}
.offer_orange_txt_inner {
    width: auto;
    float: left;
    border: 1px dashed #FFF;
    padding: 8px;
    font-family:'times_newroman';
    font-size: 26px;
    color: #FFF;
    line-height: 36px;
    text-transform: uppercase;
}
#left_design {
    padding-top: 2%;
}
#claims {
    padding-top: 5%;
    width: 100%;
    float: left;
    font-size: 24px;
    color: #666;
    padding-left: 22%;
}
#expires {
    width: 100%;
    float: left;
    font-size: 24px;
    color: #666;
    padding-bottom: 5%;
    padding-left: 20%;
}
#share {
    padding-top: 30%;
    padding-left: 5%;
}
#share p {
    font-size: 20px;
    color: #666;
}
ul.share-buttons {
    list-style: none;
    padding: 0;
}
ul.share-buttons li {
    display: inline;
}
#twitter, #google {
    padding-left: 4%;
}
#claimbtn {
    padding-right: 5%;
}
#claimbtn a {
    width: 250px;
    height: 50px;
    float: left;
    display: block;
    background: #027dff;
    border-radius: 3px;
    text-align: center;
   ...