JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div>Some other data</div>
<div>Some other data</div>
<div>Some other data</div>
<div>Some other data</div>
<div class="container">
<div class="header">
<div class="row" >
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
</div>
<div class="table">
<div class="row" >
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row" >
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<!-- some data -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
...
CSS
.container {position:relative;}
.row {clear: both;}
.row div {float: left; width: 75px; margin-bottom: 20px}
.header .row{ /*position: fixed;*/ background: #3d7;}
.table {height: 400px; overflow-y: auto; overflow-x: hidden}