JSFiddle - React, Tailwind, and code Playground

by Elak

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="http://exacttarget.github.io/fuelux/vendor/require.js"></script>
<div class="page-header">
    <h1>Permission matrix grid example</h1>
    <h1><small>User roles per app module</small></h1>
</div>
<div class="panel panel-default">
    <div class="panel-body">

<div class="table-responsive">
<table class="table table-bordered table-hoover">
    <thead>
        <tr>
            <th>Role name</th>
            <th>Module A</th>
            <th>Module B</th>
            <th>Module C Long Name </th>
            <th>Module E </th>
            <th>Module F </th>
            <th>Module G </th>
            <th>Module H </th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td  style="width:150px">
            <div class="input-group-btn">
              <button type="button" class="btn btn-default" tabindex="-1">Some Role A</button>
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Assign All</a></li>
                <li><a href="#">Unassign All</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
        </td>
        <td>
             <button type="button" class="btn btn-default  center-block">Assign</button>
        </td> 
        <td>
             <button type="button" class="btn btn-default active center-block">Unassign</button>
        </td> 
        <td class="">
             <button type="button" class="btn btn-default active center-block">Unassign</button>
        </td> 
  ...