JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/Nestable/2012-10-15/jquery.nestable.js"></script>
<nav>
  <div class="tabbable edit-app-tabs">
     <!-- Application Navigation Bar Tabs -->
     <ul class="nav nav-tabs nav-tabs-colors col-md-offset-1">
       <li role="presentation" class="active">
          <a href="#dashboard-tab" data-toggle="tab" 
             id="dashboard-link">Dashboard</a>
       </li>
       <li role="presentation">
          <a href="#edit-app-tab" data-toggle="tab">
           Edit App</a>
       </li>
     </ul>
   
     <!-- Application Tab Content Container-->
     <div class="tab-content">    
     
        <!-- Application Dashboard Tab content-->
        <div id="dashboard-tab" class="tab-pane fade in active">
          <div class="row">
               <section class="panel panel-featured-left panel-featured-primary">
                  <div class="panel-body">
                      <div class="chart chart-md" id="morrisDonutRegion"></div>
                  </div>
               </section>
          </div>
        </div>
        
        <!-- Application Edit App Tab content-->    
        <div id="edit-app-tab" class="tab-pane fade">
             <section class="panel panel-margin-settings" id="first-component">
                <header class="panel-heading">
                   <h2 class="panel-title">Privacy Statement</h2>
                </header>
                <div class="panel-body reset-padding-top"...

CSS

.nav-tabs-colors {
    background-color: #ececef;
}

.edit-app-tabs {
    background-color:#ececef;
}

#first-component {
    margin-top:33px;
}


.panel {
    background: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
}

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
/*    border-radius: 4px;*/
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
/*    overflow-y: auto;*/
    /*width:431px;*/
    /*width:402px;*/
}

.panel-margin-settings {
    margin-left:20px;
    margin-bottom:15px;
}





.panel-heading {
    background: #fdfdfd;
/*    border-radius: 5px 5px 0 0;*/
/*    border-bottom: 1px solid #DADADA;*/
/*    padding: 18px;*/
    position: relative;
}


.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 22px;
    color: #2baab1;
    font-family:'Lato', sans-serif;
    display:inline-block;
}

.panel-heading + .panel-body {
/*    border-radius: 0 0 5px 5px;*/
    
}
.panel-body {
    background: #fdfdfd;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
/*    border-radius: 5px;*/
}
.panel-body {
    padding: 15px;
}


.reset-padding-top {
    padding-top: 0;
}

JavaScript

$(document).ready(function () {
 		    
    // When clicking on other tab, the current will be deactive and the new one will be active
    $('.nav a').click(function () {
         $('.nav li').removeClass('active');
    });
    
        var morrisDonutDataRegion = [{
        label: "US",
        value: 18
    }, {
        label: "LATIN",
        value: 20
    }, {
        label: "EMEA",
        value: 32
    }];


    Morris.Donut({
        resize: true,
        element: 'morrisDonutRegion',
        data: morrisDonutDataRegion,
        colors: ['#0088cc', '#734ba9', '#E36159']
    });

		Morris.Donut.prototype.resizeHandler = function () {
        this.timeoutId = null;
        if (this.el && this.el.width() > 0 && this.el.height() > 0) {
            this.raphael.setSize(this.el.width(), this.el.height());
            return this.redraw();
        }
        else return null;
    };
    Morris.Donut.prototype.setData = function (data) {
        var row;
        this.data = data;
        this.values = (function () {
            var _i, _len, _ref, _results;
            _ref = this.data;
            _results = [];
            for (_i = 0, _len = _ref.length; _i < _len; _i++) {
                row = _ref[_i];
                _results.push(parseFloat(row.value));
            }
            return _results;
        }).call(this);
        if (this.el && this.el.width() > 0 && this.el.height() > 0) {
            return this.redraw();
        }
        else return null;
    };
		
		
     // activate Nestable for list 1
            $('#nestable').nestable()

            var nestablecount = 4;
            $('#add-new-app-category').click(function () {
                $('ol.outer').append('<li class="dd-item" data-id="' + nestablecount + '"><div class="dd-handle">Item ' + nestablecount + '</div></li>');
                nestablecount++;
            });

    
    
});