JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
    <link rel='stylesheet' href='style.css'>
<script>
var menu=document.GetElementByClassName("menu");
function open() {
menu.style.display="block";
}
</script>
    </head>
        <body>
             <div class="menu">
             <h1>Королевство</h1>
             </div>
     <input value="Нажми меня" onclick="open()" type="button">
       </body>
</html>

CSS

body { margin: 0; margin-top: 0; background: #FFFFFF }

.position {}

.menu {
display: none;
}

.brd { 
width: 80%;
border: 1px solid #C0C0C0;
background: #red; color:#B8860B; 
padding-top: 2%;
padding-bottom: 2%;
display: none;
}
.brd2 {
width: 80%;
border: 1px solid #C0C0C0;
background: #191970;
color:#B8860B;
text-align: center; 
font-family: Arial Narrow;
}