JSFiddle - React, Tailwind, and code Playground
HTML
<div class="top">
<div class="icon">
<span><hr><hr><hr></span>
</div>
</div>
CSS
* {
margin:0 auto;
padding:0px;
}
.top {
background-color:black;
width: 100%;
height: 60px;
}
.icon {
width: 28px;
border:1px solid gray;
padding:5px;
float:right;
position:relative;
top:50%;
-webkit-transform: translateY(-50%);
margin-right:10px;
}
.icon hr:not(:first-child) {
margin-top:5px;
}
.icon hr {
height: 2px;
background-color:gray;
border:0px;
}
.icon:hover {
cursor:pointer;
}
.icon:active, .icon:focus {
background-color:white;
}