JSFiddle - React, Tailwind, and code Playground

HTML

<table id="bp-table">
<thead>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</thead>
    <tbody>
    <td>one</td>    
    <td>one</td>    
    <td>one</td>    
    <td>one</td>    
    <td>one</td>        
    </tbody>
</table>

CSS

#bp-table
{
	font-family: Century Gothic, sans-serif;
  font-size: 11px;
	margin: 15px;
	width: 99%;
  max-width: 99%;
	border-radius: 20px;
  border-collapse: collapse;
}
#bp-table th
{
	font-size: 11px;
	font-weight: 700;  
  text-align: left;
  padding: 8px;
  background:rgb(60,55,88);
	color: #ffffff;
}
#bp-table td
{
	padding: 8px;
	background: #e8edff;
  text-align: left;
  border-bottom: 1px solid #fff;
	border-top: 1px solid transparent;
}
#bp-table tr:hover td
{
	background: #f0d3d3;
	color: #1e1e5b;
}