JSFiddle - React, Tailwind, and code Playground

HTML

<table class='top'><tr class='greyrow'><td>TopLevel</td><td>A</td></tr></table>
    <table class='sub1'><tr class='greyrow'><td>SubLevel 1</td><td>B</td></tr></table>
    <table class='sub2'><tr class='greyrow'><td>SubLevel 2</td><td>C</td></tr></table>
    <table class='sub2'><tr class='greyrow'><td>SubLevel 2</td><td>D</td></tr></table>    
    <table class='sub1'><tr class='greyrow'><td>SubLevel 1</td><td>E</td></tr></table>
    <table class='sub2'><tr class='greyrow'><td>SubLevel 2</td><td>F</td></tr></table> 
    <table class='top'><tr class='greyrow'><td>TopLevel</td><td>G</td></tr></table>        
    <table class='sub1'><tr class='greyrow'><td>SubLevel 1</td><td>H</td></tr>        
    <tr class='greyrow'><td>SubLevel 1</td><td>I</td></tr></table>

CSS

table {
                border-collapse: collapse;
                border-width: 0px 0;
                box-shadow: 3px 3px 4px #AAA;
            }
            
            .greyrow{
                background-color: #c7c7c7;
                font-size: 16px;
                text-align: center;
                color: black;
                font-family:Verdana;
            }
            
            td{
                width: 100px;
            }
            
            .top{
                margin-bottom:10px;
            }
            
            .sub1{
                margin-left: 20px;
                margin-bottom:10px;                
            }
            
            .sub2{
                margin-left: 40px;
                margin-bottom:10px;
            }