JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script src="http://www.remotepark.com.br/Scripts/bootstrap.min.js"></script>
<script src="http://www.remotepark.com.br/Scripts/jquery-ui-1.10.3.smoothness.min.js"></script>
<link rel="stylesheet" href="http://www.remotepark.com.br/Content/themes/jquery-ui-1.10.3.smoothness.min.css">
<link rel="stylesheet" href="http://www.remotepark.com.br/Content/bootstrap-responsive.min.css">
<script src="http://www.remotepark.com.br/Scripts/modernizr-2.6.2.js"></script>
<link rel="stylesheet" href="http://www.remotepark.com.br/Content/bootstrap.min.css">
<div id="panel-wrap">
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container-fluid">
                <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                </button> <a class="brand" href="/Panel">App</a>

                <div class="nav-collapse collapse">
                    <p class="navbar-text pull-right">Logado como juliano</a>| <a href="/Panel/Account/LogOff">Sair</a>

                    </p>
                    <ul class="nav"></ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>
    </div>
    <div id="main">
        <div id="content">
            <div class="panel-middle-top">
                <div class="middle-top-left"></div>
                <div class="middle-top-center">
                    <ul class="breadcrumb" style="background-color: transparent;">
                        <li><a href="/Panel">Home</a>  <span class="divider">/</span>
                        </li>
                    </ul>
                </div>
                <div class="middle-top-right"></div>
            </div>
            <div class="panel-middle-content">
                <fieldset>
       ...

CSS

body {
    height: 100%;
}
/*Panel Stylesheet*/
 #panel-wrap {
    min-height: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#panel-wrap > #main {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#panel-wrap > #main > #content {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: -3px 3px 3px -2px #f1f1f3;
    border-left: 1px solid #dae3e9;
    margin-top: 41px;
    margin-left: 230px;
    min-height: 100%;
    background-color: #FFFFFF;
    padding-left: 5px;
    padding-right: 5px;
}
#panel-wrap > #main > #sidebar {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 41px;
    left: 0;
    width: 230px;
}
#panel-wrap > #main > #sidebar ul {
    list-style: none;
    margin: 0 0 10px 25px;
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 0px;
    margin-left: 20px;
}
#panel-wrap > #main > #sidebar ul li {
    line-height: 20px;
    position: relative;
}
#panel-wrap > #main > #sidebar ul li .icon-group {
    font-size: 22px;
}
#panel-wrap > #main > #sidebar ul li i {
    font-size: 23px;
    top: 17px;
}
#panel-wrap > #main > #sidebar ul li:hover i {
    opacity: 1;
}
#panel-wrap > #main > #sidebar ul li.active > a, #panel-wrap > #main > #sidebar ul li > a:hover {
    color: rgba(51, 69, 90, 1);
    text-decoration: none;
}
#panel-wrap > #main > #sidebar ul li.active a {
    font-weight: 600;
    text-shadow: 1px 1px 1px #fff;
}
#panel-wrap > #main > #sidebar ul li.active i {
    opacity: 1;
}
#panel-wrap > #main > #sidebar .pointer .arrow, #panel-wrap > #main > #sidebar .pointer .arrow_border {
    border-color: transparent #fff transparent transparent;
    border-width: 11px;
    border-style: solid;
    font-size: 0;
    left: 50%;
    line-height: 0;
    margin: 0 auto;
    position: absolute;
  ...

JavaScript

/* API method to get paging information */
$.fn.dataTableExt.oApi.fnPagingInfo = function (oSettings) {
    return {
        "iStart": oSettings._iDisplayStart,
            "iEnd": oSettings.fnDisplayEnd(),
            "iLength": oSettings._iDisplayLength,
            "iTotal": oSettings.fnRecordsTotal(),
            "iFilteredTotal": oSettings.fnRecordsDisplay(),
            "iPage": oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
            "iTotalPages": oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
    };
}

/* Bootstrap style pagination control */
$.extend($.fn.dataTableExt.oPagination, {
    "bootstrap": {
        "fnInit": function (oSettings, nPaging, fnDraw) {
            var oLang = oSettings.oLanguage.oPaginate;
            var fnClickHandler = function (e) {
                e.preventDefault();
                if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
                    fnDraw(oSettings);
                }
            };

            $(nPaging).addClass('pagination').append(
                '<ul>' +
                '<li class="prev disabled"><a href="#">&larr; ' + oLang.sPrevious + '</a></li>' +
                '<li class="next disabled"><a href="#">' + oLang.sNext + ' &rarr; </a></li>' +
                '</ul>');
            var els = $('a', nPaging);
            $(els[0]).bind('click.DT', {
                action: "previous"
            }, fnClickHandler);
            $(els[1]).bind('click.DT', {
                action: "next"
            }, fnClickHandler);
        },

            "fnUpdate": function (oSettings, fnDraw) {
            var iListLength = 5;
            var oPaging = oSettings.oInstance.fnPagingInfo();
            var an = oSettings.aanFeatures.p;
            var i, j, sClass, iStart, iEnd, iHalf = Math.floor(iListLength / 2);

            if (oPaging.iTotalPages < iListLength) {
               ...