JSFiddle - React, Tailwind, and code Playground

HTML

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Панель администратора</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
  <div id="container">
                        <div id="header">Ш</div>
                        <div id="navigation">
                          <a href="#" class="knopka" tabindex="0">кнопка</a>
                          <a href="#" class="knopka" tabindex="0">кнопка</a></div>
                        <div id="menu">М
</div>
                        <div id="content">К
                        </div>
                        <div id="clear">
                        </div>
                        <div id="footer">П
                        </div>
            </div>
</body>

CSS

body {
      background: #f3f2f3;
      color: #000000;
      font-family: Trebuchet MS, Arial, Times New Roman;
      font-size: 12px;
}

 

#container {
      background: #FFFFFF;
      margin: 30px auto;
      width: 900px;
      height: 1000px;
}


#header {
      background: #838283;
      height: 200px;
      width: 900px;
}

 

#navigation {
      background: #a2a2a2;
      width: 900px;
      height: 20px;
}


#menu {
      background: #333333;
      float: left;
      width: 200px;
      height: 600px;
}

 

#content {
      background: #d2d0d2;
      float: right;
      width: 700px;
      height: 600px;
}

 
#clear {
      clear:both;
}

 
#footer {
      background: #838283;
      height: 180px;
      width: 900px;
}

a.knopka {
  color: #fff; 
  text-decoration: none;
  user-select: none;
  background: rgb(212,75,56); 
  position: relative;
  float:left;
  border: solid;
  border-width: 1px 1px 1px 1px;
  padding: .2em 1.5em; 
  outline: none; /* убирать контур в Mozilla */
} 
a.knopka:hover { background: rgb(232,95,76); } 
a.knopka:active { background: rgb(152,15,0); }