JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<style>
.boxshadow
{
    box-shadow: 4px 4px 5px #535353;border-collapse:separate;

}
.roundbox
{
    border-radius: 50px;
}
table
{
    /* !!!this is the culprit!!! */
    border-collapse: collapse;
    /* !!!!!! */
    
    padding: 20px;        
}
 
</style>
</head>
 
<body>
 
<p>
Try this in Internet Explorer 9 - all other browsers that support box-shadow tested work just fine.
</p>
 
<!-- this doesn't work in IE 9 - no shadow-->
<div style="background: lightsteelblue;padding: 20px;" >
<h3>border-collapse: collapse</h3>
<table>
<tr><td style="padding: 10px; background: white; width: 200px; ">
    <div>
         <div class="boxshadow roundbox" style="background:green;padding: 10px;width: 100px;">
             Hello WORLD
         </div>
</div>         
</td></tr>
</table>         
</div>
 
<hr />
 
<!-- this does work in IE 9 (no table) -->
<div style="background: lightsteelblue;padding: 20px;" >
     <h3>No table</h3>
     <div class="boxshadow roundbox" style="background:green;padding: 10px;">
         Hello WORLD
     </div>
</div>
 
<hr />
 
<!-- this doesn't work in IE 9 - no shadow-->
<div style="background: lightsteelblue;padding: 20px;" >
<h3>border-collapse: separate</h3>
<table>
<tr><td style="padding: 10px; background: white; width: 200px; border-collapse: separate; border: 0px;">
    <div>
         <div class="boxshadow roundbox" style="background:green;padding: 10px;width: 100px;">
             Hello WORLD
         </div>
</div>         
</td></tr>
</table>         
</div>
 
 
</body>
 
</html>