JSFiddle - React, Tailwind, and code Playground

HTML

<h1>TITLE </h1>
    <table>
    <tr class="Tablestyle1" >                                       <!--First Row-->
        <td class="header-a">A</td>
        <td colspan="4">B</td>
    </tr>
    <tr>
        <td class="Tablestyle1"rowspan="2">C</td>
        <th>Header1</th>
        <td> D</td>
        <td rowspan="6"> <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alt1" > 
        <td rowspan="6">
            <ol type="I">
                <li>List1</li>
                <li>List2</li>
                <li>List3</li>
          </ol>
    </tr>
    <tr>
        <th>Header2</th>
        <td>F</td>
    </tr>
    <tr>
        <td rowspan="4">
            <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alt2" >
        </td>
        <th rowspan="2">Header3</th>
        <td rowspan="2">H</td>
    </tr>
    <tr></tr>
    <tr>
        <th rowspan="2">Header4</th>
        <td rowspan="2">L</td>
    </tr>
    <tr></tr>
    <tr>
        <td colspan="5">
            <a href="*"> Link1 </a>
        </td>
    </tr>   
    </table>

CSS

body{
    background-color:#FFFF99
}
img {
    height: 70px;
    display:block;
}
h1{
    font-style: italic;
    color:#3300CC;

}
table, th, td {
    border: 1px solid black;
    border-spacing:3px;
}
table {
  width: 75%;
}

th {
    padding:4px;
    text-align:right;
}
td{
    padding:4px;
    height: 40px;
}

.Tablestyle1{
  background-color: #00CC66;
  text-align: center
}
.header-a{
  width: 30%;
}