JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  </header>
<footer>  
</footer>

CSS

header, footer{
  width:100%;
  height:100px;
  float:left;
}
header{
  background:#cccccc;
}
footer{
  background:#000000;
}
.navigation{
  display:block;
  background:#ffffff;
  width:300px;
  height:20px;
  margin:5px auto;
}

JavaScript

var div = document.createElement('div');
  div.className = "navigation";
  div.innerHTML = "Your panel navigation";
  
 
var screenWindows = screen.width;

    if (screenWindows >= 320 && screenWindows <= 480) {
       var f = document.body.getElementsByTagName('footer');
       f.appendChild(div);
    } else if (screenWindows >= 480) {
       var h = document.body.getElementsByTagName('header');
       h.appendChild(div);
    }