JSFiddle - React, Tailwind, and code Playground

HTML

<div class="inbox">
        <table class="inbox-headers">
            <tr>
                <td class="select"><input type="checkbox" /></td>
                <td class="from">From</td>
                <td class="subject">Subject</td>
                <td class="date">Date</td>
                <td class="mark">Mark</td>
                <td class="delete">Delete</td>
            </tr>
        </table>
        <div class="inbox-messages">
            <table>
                <tr>
                    <td class="select"><input type="checkbox" /></td>
                    <td class="from">Mrs Reynolds</td>
                    <td class="subject">You fail!</td>
                    <td class="date">yesterday</td>
                    <td class="mark">.</td>
                    <td class="delete">.</td>
                </tr>
                <tr>
                    <td class="select"><input type="checkbox" /></td>
                    <td class="from">Mrs Reynolds</td>
                    <td class="subject">You fail!</td>
                    <td class="date">yesterday</td>
                    <td class="mark">.</td>
                    <td class="delete">.</td>
                </tr>
                <tr>
                    <td class="select"><input type="checkbox" /></td>
                    <td class="from">Mrs Reynolds</td>
                    <td class="subject">You fail!</td>
                    <td class="date">yesterday</td>
                    <td class="mark">.</td>
                    <td class="delete">.</td>
                </tr>
                <tr>
                    <td class="select"><input type="checkbox" /></td>
                    <td class="from">Mrs Reynolds</td>
                    <td class="subject">You fail!</td>
                    <td class="date">yesterday</td>
                    <td class="mark">.</td>
                    <td class="delete">.</td>
                </tr>                
                <tr>
                    <td...

CSS

.inbox {
  height:200px;
  width:100%;
  position:relative;
  overflow:auto;
}
.inbox table {
  width:100%;
  border-spacing:0;
  border-collapse:collapse;
}
.inbox table td {
  padding-left:10px;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  font-size:0.9em;
}
.inbox table.inbox-headers {
  height:30px;
  font-weight:bold;
  position:absolute;
  top:0;
  background:#fff;
}
.inbox table.inbox-headers td {
  font-size:0.8em;
  border:1px solid #000;
}
.inbox table.inbox-headers:after {
  content:'';
  width:100%;
  border-bottom:1px solid #000;
  position:absolute;
  bottom:-170px;
  left:0;
}
.inbox table .from { width:177px; }
.inbox table .subject { width:225px; }
.inbox table .date { width:167px; }
.inbox table .select, .inbox table .mark, .inbox table .delete {
  width:30px;
  text-align:center;
  padding-left:0 !important;
}
.inbox table .mark, .inbox table .delete { width:50px; }
.inbox .inbox-messages {
  margin-top:30px;
  border:1px solid #000;
  border-bottom:none;
}
.inbox .inbox-messages td { height:28px; }

JavaScript

$(function() {
    
    $('.inbox').scroll(function() {
        
        $(this).find('.inbox-headers').css('top', $(this).scrollTop());
        
    });
});