JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<body>
<div class="row navbar navbar-static-top" role="navigation">
    <div class="container container-general">
        <div class="container-wrapper">
            <div class="navbar-header navbar-product">
                <a class="navbar-brand" href="/">
                                        <img alt="Software Providers Logo" class="brand-logo" src="/images/5465adf_logo_1.png">
                                        My<span class="bold-brand">Logo</span>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="row light-blue">
    <div class="content-wrapper">
        <ol class="breadcrumb">
                <li><a href="/">Home</a> </li>
                                    
    <li class="active">Title</li>
        </ol>
    </div>
</div>

<div class="row content-wrapper">
    <div class="col-lg-12 border-bottom">
                    
    <header>
        <h1>Title</h1>
    </header>
    </div>
</div>
<div class="row content-wrapper">
    <div class="col-lg-3">
    <div data-spy="affix" data-offset-top="200" id="myAffix">
            <div class="row light-blue text-left border-right">
        <h4 class="padding-left-20"> <span class="glyphicon glyphicon-search glyphicon-size-16"></span> Refine</h4>
    </div>
    <div class="row light-blue padding-20 border-bottom-top border-right">
        <h4>Category</h4>
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                <li...

CSS

a.navbar-brand, span.bold-brand {
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 22px;
    font-weight: 100;
}

.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 0px;
    list-style: none;
    background-color: #e5f3f9;

}

.breadcrumb > li {
    display: inline-block;
}

.breadcrumb > li + li:before {
    padding: 0 5px;
    color: #ccc;
    content: "/\00a0";
}

.breadcrumb > .active {
    color: #777;
}



.container {
    width: 100%;
}

.light-blue {
    background-color: #e5f3f9;
}
.container-hero {
    height:508px;
    background: url('../../bundles/softwareproviderswebsite/images/hero-bg.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.container-general {
    background-color: #006896;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.navbar-product{
    padding-bottom: 20px;
}

.navbar {
    margin-bottom: 0px;
}

span.bold-brand {
    font-weight: 400;
}

.container-wrapper {
    padding: 25px 0px 0px 90px;
}

.footer-wrapper {
    padding: 25px 0px 20px 90px;
}

.breadcrumb-wrapper {
    padding: 0px 90px 90px 90px;
    margin-top: 0px;
}

.brand-logo {
    margin-top: -5px;
    height: 20px;
    width: 20px;
}

.starter-template {
    padding: 120px 0px 120px 0px;
    text-align: center;
}

.hero-container {
    padding-top: 175px;
}

.starter-template h2 {
    font-family: 'Lato', sans-serif;
    margin: 0 auto;
    width: 65%;
    font-weight: 900;
    font-size: 50px;
    color: #fff;
}

.hero-h2 {
    font-family: 'Lato', sans-serif;
    margin: 0 auto;
    font-weight: 900;
    font-size: 50px;
    color: #fff;
    text-align: center;
}

h2.heading {
    display: inline-block;
    font-size: 36px;
}

h2 {
    font-size: 36px;
}
h2, h3, h4, h5, h6 {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    color:...