JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="container">
   <div class="row" style="margin-bottom:10px; margin-top:10px"> 
    <div class="col-sm-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Logs <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">User Logs</a></li>
          <li><a href="#">System Log</a></li>
          <li><a href="#">Daily Log</a></li>

        </ul>
      </div><!-- /btn-group -->
        <input type="text" class="form-control" aria-label="..." value="Daily Logs" />
    </div><!-- /input-group -->
       </div>
       <div class="col-sm-6">
    
      <div class="input-group">
          <input type="text" class="form-control" placeholder="January 22, 2105 to March 3, 2015" aria-describedby="basic-addon2"/>
          <span class="input-group-addon" id="basic-addon2"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
           </div>
          
          
       </div>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>SID</th>
        <th>SYSTEM</th>
        <th>DATE</th>
          <th>DURATION</th>
      </tr>
    </thead>
    <tbody>
        
         <tr>
          <td rowspan="2"><a href="#stay">William Gaither (wmgaither)</a></td>
        <td >Pink Cadillac</td>
        <td>11052015</td>
          <td>
              
         0830 - 1345
</td>
      </tr>
         <tr>
        <td>Mountain Bike</td>
        <td>07132015</td>
             <td>
                       0830 - 1345
</td>
      </tr>
        
        
                      <tr>
         ...

CSS

.btn-group .btn-xs { width:90px}
.btn-group .dropdown-toggle { width:30px}
.btn-default { width:120px}

thead tr { background-color:#f1f1f1;}
.table>thead>tr>th {
  border-bottom: 4px solid #fff;
}

JavaScript

// Daily Log Grid