JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://s3-sa-east-1.amazonaws.com/vochani/bootplus.css">
<body>
<div id="wrapper">
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<div class="card card-small">
<div class="card-heading simple">
Heading
</div>
<div class="card-body">
<div class="tab-content">
<div class="active tab-pane" id="columns">
<table class="table table-striped table-condensed sampleTable">
<thead>
<tr>
<th> </th>
<th>Name</th>
<th>State</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">John</a>
</td>
<td>NY</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Kavita</a>
</td>
<td>NY</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Luke</a>
</td>
<td>NY</td>
<td></td>
</tr>
<tr>
...
CSS
html, body {
height: 100%;
}
body {
background: grey;
}
#foot {
position: absolute;
bottom: 0;
background: white;
font-size: 16px;
font-weight: bold;
}
#h {
margin-bottom: 20px;
}
#wrapper {
margin-bottom: 30px;
}