JSFiddle - React, Tailwind, and code Playground
by bluey
HTML
<div class='player_box info_pic_2'>
<div style='display: block; width: 100%;'>
<table style='margin: 0; padding: 0; width: 100%; border-style: solid; border-width: 1px; position: absolute; left: 0; top: 0; right: 0px; height: 30px;'>
<? // PLAYER HEADER BEGIN ?>
<tr class='border_bottom'>
<td>CELL A</td>
<td>CELL B</td>
</tr>
<? // PLAYER HEADER END ?>
</table>
<table style='margin: 0; padding: 0; width: 100%; border-style: solid; border-width: 1px; position: absolute; left: 0; right: 0px; top: 30px;'>
<tr class='border_bottom'>
<td>ROW A</td>
</tr>
<tr class='border_bottom'>
<td>ROW B</td>
</tr>
<tr class='border_bottom'>
<td>ROW C</td>
</tr>
<tr class='border_bottom'>
<td>ROW D</td>
</tr>
<tr class='border_bottom'>
<td>ROW E</td>
</tr>
<tr class='border_bottom'>
<td>ROW F</td>
</tr>
</table>
</div>
</div>
CSS
tr.border_bottom td {
border-bottom: 1pt solid black;
}
.info_pic_2 {
position: absolute;
height: 250px;
top: 130px;
right: 70px;
width: 350px;
max-width: 100%;
display: block;
border-style: solid;
border-width: 5px;
color: black;
}
.player_box {
border: solid 4px #000000;
-moz-border-radius-topleft: 33px;
-moz-border-radius-topright: 32px;
-moz-border-radius-bottomleft: 32px;
-moz-border-radius-bottomright: 32px;
-webkit-border-top-left-radius: 33px;
-webkit-border-top-right-radius: 32px;
-webkit-border-bottom-left-radius: 32px;
-webkit-border-bottom-right-radius: 32px;
border-top-left-radius: 33px;
border-top-right-radius: 32px;
border-bottom-left-radius: 32px;
border-bottom-right-radius: 32px;
text-align: center;
background: #575757;
padding: 100px 50px 100px 50px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
opacity: 0.8;
}