JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
		<div class="content-header">
			
		</div>
		<div class="content-loader">
			<table>
				<tbody>
					<tr>
						<td>First Name</td>
						<td>Last Name</td>
						<td>Gender</td>
						<td>Birth Date</td>
						<td>Address</td>
						<td>Zip Code</td>
						<td>Nationality</td>
						<td>Contact Number</td>
						<td>Email</td>
						<td>Username</td>
						<td>Course</td>
						<td>Year</td>
						<td>ID Number</td>
						<td>Subjects</td>
						<td>Other Fields</td>
						<td>Other Fields</td>
						<td>Other Fields</td>
						<td>Other Fields</td>
						<td>Other Fields</td>
						<td>Other Fields</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

CSS

.content {
	width: 1100px;
	height: 200px;
	background: #fdfdfd;
	margin: 0px auto;
	position: relative;
	top: 40px;
	border: 1px solid #aaaaaa;
}

.content .content-header {
	width: 100%;
	height: 40px;
	background-color:#aaa;
	background-image:-moz-linear-gradient(top,#eeeeee,#cccccc);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(#eeeeee),to(#cccccc));
	background-image:-webkit-linear-gradient(top,#eeeeee,#cccccc);
	background-image:-o-linear-gradient(top,#eeeeee,#cccccc);
	background-image:linear-gradient(to bottom,#eeeeee,#cccccc);
	border-bottom: 1px solid #aaaaaa;
}

.content-loader {
    overflow: scroll;
}
.content-loader table {
	width: auto;
	background: #aaa;
}

.content-loader table tr {
	background: #eee;
}

.content-loader table tr td {
    
}