JSFiddle - React, Tailwind, and code Playground

HTML

<div id="headBar">
		<a href="javascript:ReverseDisplay('dropmen')">
		<img id="menubutton" src="https://lh3.ggpht.com/XkKFmevjtyDntd5e0XeSssV1fukxNFuMvXRpMdXGZ56Ev5WPpggPrPFEi_2AUXFMbd4=w300"/>
		</a>
		</div>

CSS

#headBar{
	background-color: #88a6cb;
    height: 10%;
    width: 100%;
    position: fixed;
    top: 0px;
    text-align: center;
}


#menubutton{
	height: 70%;
    float: right; 
    padding-right: 5%;
    margin:auto;
    vertical-align: middle;
    position: relative;
    top: 50%;
    
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}