JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header"><h2>This is header</h2></div>
<div id="content">

<table class="mytable fixed-top">
<thead align="center" >
<tr bgcolor="green" height="30" style="color:white;font-weight:bold;" >
<th width="10%">SNo</th>
<th width="12%">Code</th>
<th width="48%">Title</th>
<th width="15%">Debit</th>
<th width="15%">Credit</th>
</tr>
</thead>
</table>

<table class="mytable table-body">

<tr>
<tr height="30" style="color:white;font-weight:bold;" >
<td width="10%">1</td>
<td width="12%">a</td>
<td width="48%">b</td>
<td width="15%">500</td>
<td width="15%">800</td>
</tr>

<tr>
<tr height="30" style="color:white;font-weight:bold;" >
<td width="10%">2</td>
<td width="12%">a</td>
<td width="48%">b</td>
<td width="15%">500</td>
<td width="15%">800</td>
</tr>


<tr>
<tr height="30" style="color:white;font-weight:bold;" >
<td width="10%">3</td>
<td width="12%">a</td>
<td width="48%">b</td>
<td width="15%">500</td>
<td width="15%">800</td>
</tr>

<tr>
<tr height="30" style="color:white;font-weight:bold;" >
<td width="10%">4</td>
<td width="12%">a</td>
<td width="48%">b</td>
<td width="15%">500</td>
<td width="15%">800</td>
</tr>

<tr>
<tr height="30" style="color:white;font-weight:bold;" >
<td width="10%">5</td>
<td width="12%">a</td>
<td width="48%">b</td>
<td width="15%">500</td>
<td width="15%">800</td>
</tr>

<tr>
<tr height="30" style="color:white;font-weight:bold;" >
<td width="10%">6</td>
<td width="12%">a</td>
<td width="48%">b</td>
<td width="15%">500</td>
<td width="15%">800</td>
</tr>

<tr>
<tr height="30" style="color:white;font-weight:bold;" >
<td width="10%">1</td>
<td width="12%">a</td>
<td width="48%">b</td>
<td width="15%">500</td>
<td width="15%">800</td>
</tr>
<tr>
<tr height="30" style="color:white;font-weight:bold;" >
<td width="10%">1</td>
<td width="12%">a</td>
<td width="48%">b</td>
<td width="15%">500</td>
<td width="15%">800</td>
</tr>

<tr>
<tr style="color:white;font-weight:bold;" >
<td width="10%">1</td>
<td width="12%">a</td>
<td...

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}


body {
        overflow: hidden;
    }
	
#header{
  width:100%;
  height:40px;
  background:orange;
  text-align:center;
  line-height:40px;
}
	
    #content {
   max-height: calc(100% - 140px);
  overflow-y: scroll;
    padding: 30px  !important;
    padding-top: 5px  !important;
  margin-top: 10px !important;
   margin-bottom: 10px !important;
	border: 1px solid red;
	width:70%;
	background-color:#9FF;
	margin:0 auto;
	

    }


.mytable {
 width: 100%;
 padding: 3px;
 background-color: #fff;
}



.mytable th, td {
  text-align: center;
  color:#333;
  border:1px solid silver;
  
}



.table-body {
  padding-top: 2px;
}

#footer{
  width:100%;
  height:40px;
  background:orange;
  text-align:center;
  line-height:40px;
}

h2{
	margin:0;
}