JSFiddle - React, Tailwind, and code Playground
HTML
<ul id=menu>
<li>Menu item 1
<li>Menu item 2
<li>Menu item 3
<li>Menu item 4
</ul>
CSS
ul {
background: #333;
font-family: sans-serif;
color: #ddd;
position: fixed;
margin-left: 15%;
width: 70%;
}
ul li {
display: block;
padding: 0.4em 0.6em;
border: 1px solid #666;
margin-bottom: -1px;
}
JavaScript
window.onresize = function(){
var menu = document.getElementById('menu');
menu.style.fontSize = (window.innerWidth/20)+'px';
menu.style.top = ((window.innerHeight-menu.offsetHeight)/2)+'px';
};
window.onresize();