JSFiddle - React, Tailwind, and code Playground
HTML
<body id="bodyMain">
<div class ="index">
<div id="menu">
<div id = "divlang">
<a href="index.php?language=en"> <img id="langicon" src="img/ENG_icon.png"/> </a>
<a href="index.php?language=ita"> <img id="langicon" src="img/ITA_icon.png"/> </a>
</div>
</br>
<a id="hiddenmenu" href="#">☰ </a>
<ol id="list">
<li class="listitem" id="listHome"> Home
</li>
<li class="listitemLOG" id="listInsertENG"> Insert
</li>
<li class="listitem" id="listShowENG"> Show
</li>
<li class="listitem" id="listSearchENG"> Search
</li>
<li class="listitemVOID">
</li>
<li class="listitem" id="listInfoENG"> Info
</li>
<li class="listitem" id="listPubbENG"> Pubblications
</li>
<li class="listitem" id="listPhotoENG"> Photo
</li>
<li class="listitem" id="listLinkENG"> Link
</li>
<li class="listitem" id="listContactENG"> Contacts
</li>
<li class="listitemVOID">
</li>
<li class="listitem" onclick='showLog()' id="buttonlogin"> Login
</li>
<form action='' method='POST' class='listitemLOG'>
<button type='submit' class ='bottone_logout' name='Logout' id='Logout'> Logout </button>
</form>
<li class="listitemADM" id="listReservedArea"> Reserved Area
</li>
<div id="login_div";>
<fieldset>
<legend> <b> Login </b> </legend>
<form action="" method="POST" class="login">
<p>
<label>Username</label>
...
CSS
.index{
width :100%;
margin-top:2%;
/*border-color:#000;
border:solid;*/
clear:both;
}
#menu{
float:left;
width:22%;
margin:1%;
}
#content{
float:right;
width:75%;
margin-right: 1%;
word-wrap: break-word;
}
JavaScript
$("#listInfo").click(function(){
$("#content").load('view/info.html');
document.title = 'Info';
});
$("#listLink").click(function(){
$("#content").load('view/link.html');
document.title = 'Link';
});
$("#listContact").click(function(){
$("#content").load('view/contacts.html');
document.title = 'Contacts';
});