JSFiddle - React, Tailwind, and code Playground

HTML

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>

<div style="width: 100%; height:11600px;">
      <div class="explore_photos">
        <div class="ex_titleBar">
            <div class="ex_titleDetails">
                <span>recent things: </span>


            </div>
        </div>
    </div>
    <div class="explore_recentAlbums" data-spy="affix" data-offset-top="20">
        <div class="ex_recentBar">
            <div class="ex_titleDetails">
                <span>recent stuff: </span>
            </div>
        </div>
        <table>
            <tr>
                <td>
                 
                        <div class="well well-small" style="margin-bottom: 1px;">
                            <span>Recent</span>
                        </div>
                      
                        <span class="NoDataFound">No Photo.</span>
                        
                      
                        <div class="smallalbumcover">
                            <div class="mosaic-blocksmall mofade">
                                <div class="mosaic-overlay">
                                    <div class="details">
                                        <p>
                                            <a href="#">xzxz</a>
                                        </p>
                                    </div>
                                </div>
                                <div class="mosaic-backdrop">
                                    <img src=""/>
                                </div>
                            </div>
                            <div class="clearfix">
                            </div>
                        </div>
                            
                        <div style="margin-bottom: 1em; text-align: center; margin-top: 10px;">
                            <a...

CSS

body {
   background-color: #E6DDDD;
}
.container
{
    width: 1112px;
    background-color: white;
   
}
.explore_photos
{
    float: left;
    position: relative;
    width: 74%;
}

.explorephoto_item
{
    float: left;
}

.exploredetails
{
    margin: 15px 20px;
}

.exploredetails h4
{
    color: white;
    font-size: 12px;
    line-height: 1.2;
}


    .exploredetails h3 a, a:hover
    {
        color: white;
    }

    .exploredetails h5 span
    {
        color: white;
        font-size: 12px;
    }

.ex_titleBar
{
    margin-bottom: 15px;
    margin-top: 19px;
    width: 94.3%;
    height: 35px;
    background-color: #F9AC2F;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from( #F9AC2F), to( #F9AC2F));
    background-image: -webkit-linear-gradient(top, #F9AC2F, #F9AC2F);
    background-image: -o-linear-gradient(top, #F9AC2F, ##F9AC2F);
    background-image: linear-gradient(to bottom, #F9AC2F, #F9AC2F);
}

    .ex_titleBar span
    {
        color: white;
        font-weight: bolder;
    }

    .ex_titleBar .title
    {
        display: inline;
        color: white;
        font-weight: bolder;
    }

.ex_recentBar .title
{
    display: inline;
    color: white;
    font-weight: bolder;
}

.ex_recentBar span
{
    color: white;
    font-weight: bolder;
}

.ex_titleDetails
{
    padding-top: 5px;
    padding-left: 19px;
}

.explore_recentAlbums
{
    width: 25%;
    float: right;
    margin: auto;
}

.ex_recentBar
{
    margin-bottom: 15px;
    margin-top: 19px;
    width: 100.8%;
    height: 35px;
    background-color: #F9AC2F;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from( #F9AC2F), to( #F9AC2F));
    background-image: -webkit-linear-gradient(top, #F9AC2F, #F9AC2F);
    background-image: -o-linear-gradient(top, #F9AC2F, ##F9AC2F);
    background-image: linear-gradient(to bottom, #F9AC2F, #F9AC2F);
}
.well {
    background-color: #EEDC94;
}