JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
                        <div id="header">Ш</div>
                        <div id="navigation">
                          <a href="#" class="button" tabindex="0">кнопка</a>
                          <a href="#" class="button" tabindex="0">кнопка</a></div>
                        <div id="menu">М
</div>
                        <div id="content">К
                        </div>
                        <div id="footer">П
                        </div>
            </div>

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;
      width: 200px;
      height: 600px;
      float: left;
}

 

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

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

a.button {
  color: #fff; 
  text-decoration: none;
  -webkit-user-select: none;/*всё равно только webkit*/
  background: rgb(212,75,56); 
  position: relative;
  float:left;
  border: solid 1px;
    height: -webkit-calc(100% - 2px); /*-webkit-calc(родитель - border)*/
  padding: 0 1.5em; 
  outline: none; /* убирать контур в Mozilla */
    display: block;
} 
a.button:hover { background: rgb(232,95,76); } 
a.button:active { background: rgb(152,15,0); }