JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="window.resizeTo(600,600)">
<div id="header" style="background-color:#ffffff;">
<div style="position:absolute; bottom:0; right:0; width: 20x; height: 20x;   background-image: url(default_app_logo.png)">
</div>
<input type="button" value="Pianifica Allenamento" onclick="location.href='index.html';"/>
<input type="button" value="Statistiche" onclick="location.href='index.html';"/>
<input type="button" value="Presenze" onclick="location.href='index.html';"/>
<input type="button" value="Varie Sez.SFW" onclick="location.href='index.html';"/>
</div>


<div class="ex">
<ul>
    <li><a href="#">Categoria1</a></li>
    <li><a href="#">Categoria2</a>
        <ul class="sub-menu">
            <li><a href="#">Esercizio1</a></li>
            <li><a href="#">Esercizio2</a></li>
        </ul>
    </li>
    <li><a href="#">Categoria3</a></li>
    <li><a href="#">Categoria4</a>
        <ul class="sub-menu">
            <li><a href="#">Esercizio1</a></li>
            <li><a href="#">Esercizio2</a></li>
        </ul>
    </li>
    <li><a href="#">Categoria5</a></li>
</ul>
</div>
<div class="tablewrap">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td> Nome Esercizio </td>
        <td> 
            <table  border="1" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td>Obiettivo 1:</td>
                    <td>Obiettivo <br>  tattico:</td>
                    <td>Durata:</td>
                </tr>
                <tr>
                    <td>Obiettivo 2:</td>
                    <td>Obiettivo Coordinato:</td>
                    <td>Tempo Effettivo: </td>
                </tr>
            </table>
        </td>
    </tr>
    
    <tr>
    	<td> Numero giocatori:<br>
            Materiale:<br>
            Descrizione: <br>
    	</td>
    	<td align="center"> IMMAGINE DA INSERIRE </td>
    </tr>
    <tr>
    	<td colspan="2" align="center"> NOTE </td>
    </tr>
</table>
</div>
</body>

CSS

body { 
    background-color:#ffffff;
}
div.uno{
margin-top:10px;
margin-bottom:10px;
border-bottom:2px solid;
border-color:#00ff00;
vertical-align: middle;
}
*{font-family:"Georgia",Georgia,serif;}
div.ex {
    height:250px;
    width:150px;
    padding:10px;
    border:1px solid gray;
    margin-bottom:10px;
    float:left;
    text_color:#ffffff;

}
.tablewrap{
    vertical-align: middle;
    float:left;
    margin-left:20px;
}
input {
    padding: .5em;
    color: #ffffff;
    text-shadow: 1px 1px 1px #000;
    border: solid thin #882d13;
    -webkit-border-radius: .7em;
    -moz-border-radius: .7em;
    border-radius: .7em;
    -webkit-box-shadow: 2px 2px 3px #999;
    box-shadow: 2px 2px 2px #bbb;
    background-color: #b4ce1c;
    background-image: -webkit-gradient(linear, left top, left bottom,  from(#e9ede8), to(#ce401c), color-stop(0.4, #8c1b0b));
}

JavaScript

$(function(){

   //Hide all the sub menus
   $('.sub-menu').hide();

   $("li:has(ul)").click(function(){
      //Find the child ul and slideToggle
      $(this).children("ul").slideToggle();
   });
});