JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

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 class="row head-row">
    <div class="col-xs-6 col-md-3 text-center">111</div>
    <div class="col-xs-6 col-md-3 text-center">222</div>
    <div class="col-xs-6 col-md-3 text-center">333</div>
    <div class="col-xs-6 col-md-3 text-center">444</div>
</div>
<div class="row menu-row">
    <div class="col-xs-12 col-md-12">
        <ul class="nav nav-pills">
            <li role="presentation" class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>link1</a>

            </li>
            <li role="presentation"><a href="#">link2</a>

            </li>
            <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>

                <ul class="dropdown-menu">
                    <li><a href="#">Action</a>

                    </li>
                    <li><a href="#">Another action</a>

                    </li>
                    <li><a href="#">Something else here</a>

                    </li>
                    <li class="divider" role="separator"></li>
                    <li><a href="#">Separated link</a>

                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="row content-row">
    <div class="col-xs-12 col-md-8">
        <div class="row slider-row">
            <div class="col-xs-12 col-md-12">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
    ...

CSS

.menu-row {
    background-color:red;
}
.slider-row .carousel-control {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}
.slider-row .item > img {
  margin: 0 auto;
}
.menu-row .glyphicon {
    padding: 0 10px 0 0;
}
.nav-pills > li > a {
    border-radius: 0;
}