JSFiddle - React, Tailwind, and code Playground

HTML

<table id="maintable" cellspacing="0" cellpadding="0">
  <tr>
    <td id="leftcolumn" >
        <ul class="leftmenu">			
			<li><a href="#">CDATA</a></li>	
			<li><a href="#">Create/Read/Manipulate</a></li>
            <div class="submenu"> 
                <a href="#">DOM</a><br /> 
                <a href="#">Reader/Writer</a><br /> 
                <a href="#">SimpleXML</a><br /> 
            </div>
			<li><a href="#">Entity Declaration</a></li>	
			<li><a href="#">Create/Read/Manipulate</a></li>
            <div class="submenu"> 
                <a href="#">DOM</a><br /> 
                <a href="#">Reader/Writer</a><br /> 
                <a href="#">SimpleXML</a><br /> 
            </div>
		</ul>
    </td>
  </tr>
</table

CSS

#leftcolumn {
    width: 18%;
    margin: 3px;
    padding: 0;
    display: inline;
}
#leftcolumn ul.leftmenu {
    list-style: none;
    text-align: left;
    margin: 0 5px 3px 10px;
    padding: 0px;
}
#leftcolumn ul.leftmenu li {
    border-bottom: 1px solid #EFF0F1;
    font-size:14px;
    padding: 1px 0px;
}
#leftcolumn ul.leftmenu li a {
    line-height: 20px;
    color: #333;
    text-decoration: none;
}
#leftcolumn ul.leftmenu li a:hover {
    color: #FA7837;
}
#leftcolumn ul.leftmenu li#activemenu a {
    color: #FA7837;
}
#leftcolumn ul.leftmenu .submenu {
    margin: 3px 0 3px 7px;
}
#leftcolumn ul.leftmenu .submenu a {
    color: #333;
    font-weight: normal;
    font-size:14px;
    text-decoration: none;
    line-height: 1.3em;
}
#leftcolumn ul.leftmenu .submenu a:hover {
    color: #F9864D;
    text-decoration:underline;
}
#leftcolumn ul.leftmenu .submenu a#activesubmenu {
    color: #F9864D;
}