JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="tab-pane active" id="Form0Tab0"><div class="panel"><div class="panel-body"><div class="form-group form-group-sm" id="RoleFormDriver_name"><label class="control-label required col-md-3">Name</label><div class="control-field col-md-9"><div><input type="text" class="form-control" maxlength="120" tabindex="2004"></div><span class="form-validation-message"></span></div></div><div class="form-group form-group-sm" id="RoleFormDriver_functionPermissions"><label class="control-label col-md-3">Assign Functions</label><div class="roles-style col-md-9"><span class="form-validation-message"></span><div class="assignrolesform">

<table class="table table-responsive table-hover table-bordered table-condensed">
    <thead>
        <tr><th>Functions</th><th>None</th><th>View</th><th>Update</th></tr>
    </thead>
    <tbody>
        <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-1" aria-expanded="true" aria-controls="group-of-rows-1">
        <td><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="row-title">Admin</span></td>
<td><input type="radio"></td>
          	<td><input type="radio"></td>  
            <td><input type="radio"></td>
        </tr>
    </tbody>
    <tbody id="group-of-rows-1" class="collapse in" aria-expanded="true" style="">
        <tr>
            <td>Audit Trail</td>
            <td><input type="radio"></td>
          	<td><input type="radio"></td>  
            <td><input type="radio"></td>
        </tr>
        <tr>
            <td>Release Manager</td>
            <td><input type="radio"></td>
          	<td><input type="radio"></td>  
            <td><input type="radio"></td>
        </tr>
        <tr>
            <td>Release Tags</td>
            <td><input type="radio"></td>
         ...

CSS

@font-face {
    font-family: 'GillSansMT';
    src: url('../../vrs4gui/fonts/33535gillsansmt.eot?#iefix'),
    url('../../vrs4gui/fonts/33535gillsansmt.woff') format('woff'),
    url('../../vrs4gui/fonts/33535gillsansmt.ttf') format('truetype');
}
@font-face {
    font-family: 'CenturyGothic';
    src: url('../../vrs4gui/fonts/gothic.eot?#iefix'),
    url('../../vrs4gui/fonts/gothic.woff') format('woff'),
    url('../../vrs4gui/fonts/gothic.ttf') format('truetype');
}
.GillSansMT{
    font-family: 'GillSansMT' !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
html {
    height: 100%;
    width: 100%;
}
body {
    height:100%;
    font-size: 11px;
    font-family: Verdana, Arial,sans-serif;
}
table td, select {
    font-family: Verdana, Arial, helvetica, sans-serif;
    font-size:8pt;
}
.table {
    margin-bottom: 0;
}
.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th,
.table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td {
    padding: 2px 5px;
}
.table-condensed>tbody>tr>td {
    min-height: 24px;
}
.btn-link:focus,.btn-link:hover {
    color: initial;
    text-decoration: none;
}
label{
    font-weight:500;
}
.input-group-addon, .btn-group-vertical {
    border-radius: 0 !important;
}
.top-margin {
    margin-top: 74px;
}
.panel {
    border-radius: 0;
    border: 0;
    margin: 0;
    box-shadow: none;
    -webkit-box-sizing: inherit;
}
h4 {
    font-size: 19px !important;
    font-weight: 700;
}
.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus {
    outline: initial;
    outline-offset: initial;
}
input, input.form-control, select.form-control, .form-group-sm .form-control, .form-control, select, .input-group .form-control {
    border-radius: 0 !important;
    box-shadow: none !important;
}
/*select, select.form-control {*/
/*border-color: transparent !important;*/
/*outline: 1px solid #CCC...