JSFiddle - React, Tailwind, and code Playground

by TanyRay

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.dropbox.com/s/7kokvsgteyutgsd/lavish-bootstrap.css?dl=0">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<body>
    <div id="container">
        <div id="monitoringPage" class="container-fluid">
            <div id="outer-north" class="pageTitle">
                <div class="logo">
                    <div class="header-logo row">
                        <img src="/app/images/Banner.png" alt="" class="img-responsive">
                    </div>
                </div>
            </div>
            <div id="outer-center" class="content main-content">
                <div id="middle-north">
                    <div class="container-page-head container-lg-height container-md-height">
                        <div class="row row-lg-height row-md-height header">
                            <div class="title col-lg-11 col-md-11 col-lg-height col-md-height col-middle">
                                	<h2>Dashboard</h2>

                            </div>
                            <div class="blackListLink col-lg-1 col-md-1 col-lg-height col-md-height col-middle">	<a href="#">Administrator</a>

                            </div>
                        </div>
                    </div>
                    <nav class="status-navbar navbar navbar-default" role="navigation">
                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse container-fluid container-lg-height container-md-height" id="bs-navbar-collapse-1">
                            <div class="row row-lg-height row-md-height" style="margin: 0;">
                                <div class="col-lg-4 col-md-4 search-panel col-lg-height col-md-height col-middle">
                                    <form class="navbar-form navbar-left search-form"...

CSS

/*common*/

html, body {
    height: 100%;
}

#container {
	height: 100%;
	margin: 0 auto;
	width: 100%;
}

@media screen and (min-width: 768px) {
.navbar-nav {
	width: 100%;	
}
}

/* columns of same height styles */
.container-xs-height {
    display:table;
    padding-left:0px;
    padding-right:0px;
}
.row-xs-height {
    display:table-row;
}
.col-xs-height {
    display:table-cell;
    float:none;
}
@media screen and (min-width: 768px) {
    .container-sm-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-sm-height {
        display:table-row;
    }
    .col-sm-height {
        display:table-cell;
        float:none;
    }
}
@media screen and (min-width: 992px) {
    .container-md-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-md-height {
        display:table-row;
    }
    .col-md-height {
        display:table-cell;
        float:none;
    }
}
@media screen and (min-width: 1200px) {
    .container-lg-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-lg-height {
        display:table-row;
    }
    .col-lg-height {
        display:table-cell;
        float:none;
    }
}

/* placeholder style */
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #797A7C;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #797A7C;
    opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #797A7C;
    opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #797A7C;
}
/*placeholder for IE8-9*/
.placeholder {
	color: #797A7C;
}

/* vertical alignment styles */
.col-top {
    vertical-align:top;
}
.col-middle {
    vertical-align:middle;
}
.col-bottom {
    vertical-align:bottom;
}

.btn-primary {
    margin-right: 5px;
}

.container-fluid  {
    padding: 0;
}

.panel-heading {
    font-size: 18px;
}

input[type="text"], textarea {
    font-weight:...