JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
</br>
</br>
<div class = "full" >
<div class="imaging">
<img src="img.jpg" id="menu">
</div>
<div class="block4">
<ul>
<li><input type="button" id="btnl1" style="background: #F6F6f6;" value="1" ></li>
<li><input type="button" id="btnl2" style="background: #F6F6f6;" value="2"></li>
<li><input type="button" id="btnl3" style="background: #F6F6f6;" value="3"></li>
<li><input type="button" id=btnl4 style="background: #F6F6f6;" value="4"></li>
</ul>
</div>
<div class="block5">
<ul>
<li><input type="button" id="btnr1" style="background: #F6F6f6;" value="r1"></li>
<li><input type="button" id="btnr2" style="background: #F6F6f6;" value="r2"></li>
<li><input type="button" id="btnr3" style="background: #F6F6f6;" value="r3"></li>
<li><input type="button" id="btnr4" style="background: #F6F6f6;" value="r4"></li>
</ul>
</div>
</br>
<div id="menubar" >
<div class="menu_item">
<ul>
<li><input type="button" id="btn3" style="background: #F6F6f6;" value="3"></li>
<li><input type="button" id="btn6" style="background: #F6F6f6;" value="6"></li>
<li><input type="button" id="btn9" style="background: #F6F6f6;" value="9"></li>
</ul>
</div>
<div class="menu_item">
...
CSS
li {
list-style-type: none;
}
ul {
margin-left: 0;
padding-left: 0;
}
.full{
width:800px;
text-align: center
position: relative;
}
.imaging{
width:700px;
left: 50%
float: left;
margin-left: -350px;
}
.block4{
float: left;
width: 100px;
margin-left: 30px;
}
.block5{
float: right;
width: 100px;
}
.text{
width:700px;
height:500px;
}