JSFiddle - React, Tailwind, and code Playground

by StriplingWarrior

HTML

<link rel="stylesheet" href="http://hq.truenorthlogic.com/tnl-ui/Static/Theme/Blue/jquery-ui-1.8.13.css">
<link rel="stylesheet" href="http://modus.truenorthlogic.com/Static/Theme/Blue/Blue.min.css">
<div class="wrapper">

<div class="roles">

<div class="section-heading">Roles</div>

<div style="margin-bottom:10px;">
    <div style="font-weight:bold;">System</div>
    <div class="role-option"><a href="#">TNL User</a> <a id="" class="tnl-icon tnl-icon-link tnl-icon-link-active" title=""><span class="ui-icon-newwin ui-icon"></span></a></div>
    <div class="role-option"><a href="#">Super User</a> <a id="" class="tnl-icon tnl-icon-link tnl-icon-link-active" title=""><span class="ui-icon-newwin ui-icon"></span></a></div>
</div>
<div style="margin-bottom:10px;">
    <div style="font-weight:bold;">HRO Users</div>
    <div class="role-option"><a href="#">Staffing</a> <a id="" class="tnl-icon tnl-icon-link tnl-icon-link-active" title=""><span class="ui-icon-newwin ui-icon"></span></a></div>
    <div class="role-option role-option-hot">Position Management <a id="" class="tnl-icon tnl-icon-link tnl-icon-link-active" title=""><span class="ui-icon-newwin ui-icon"></span></a></div>
    <div class="role-option"><a href="#">ERSC</a> <a id="" class="tnl-icon tnl-icon-link tnl-icon-link-active" title=""><span class="ui-icon-newwin ui-icon"></span></a></div>
</div>
    </div>
<div class="object-type">

<div class="section-heading">Object Type</div>
<table class="type-table">
    <tbody><tr>
        <th style="width:200px;">Type</th>
        <th style="width:10px;">Global</th>
        <th style="width:10px;">Object</th>
    </tr>
    <tr class="tr-option">
        <td style="white-space:nowrap;">Person</td>
        <td style="text-align:center;">6</td>
        <td style="text-align:center;">1</td>
    </tr>
    <tr class="tr-option-hot">
        <td style="white-space:nowrap;">Activity</td>
        <td style="text-align:center;">5</td>
        <td...

CSS

div.wrapper {position: relative;}
div.wrapper > div {float: left; overflow:auto;}
div.roles {width: 20%;}
div.object-type {width: 30%;}
div.activity {width: 50%;}
td {white-space: normal !important;}