JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

  <div class="leftblock">
  
    <a href="#" class="logo">promo</a>
    
    <nav class="navigate">
    
      <nav class="mainmenu">
        <a href="#">Сайт</a>
        <a href="#">Сайт</a>
        <a href="#">Сайт</a>
        <a href="#">Сайт</a>
      </nav>
      
      <nav class="innermenu">
        <a href="#">Новости</a>
        <a href="#">Новости</a>
        <a href="#">Новости</a>
        <a href="#">Новости</a>
        <a href="#">Новости</a>
        <a href="#">Новости</a>
      </nav>
    
    </nav>
    
  </div>
  
  <div class="rightblock">
    123
  </div>
  
</div>

CSS

* { margin: 0; padding: 0; }
body {
  font-family: arial;
}
.container {
  display: flex;
  min-height: 100vh;
}
.leftblock {
  width: 250px;
  min-height: 100vh;
  background: #282C37;
}
.logo {
  width: 250px;
  height: 60px;
  border-bottom: 1px solid #787878;
  color: #ffffff;
  font-size: 30px;
  text-align: center;
  line-height: 60px;
  text-transform: uppercase;
  text-decoration: none;
  display: block;
}
.navigate {
  display: flex;
  height: calc(100% - 61px);
}
.mainmenu {
  width: 100px;
  background: #313541;
  height: 100%;
}
.mainmenu a {
  display: block;
  text-align: center;
  line-height: 100px;
  text-decoration: none;
  width: 100px;
  height: 100px;
  color: #6C707C;
}
.mainmenu a:hover {
  color: #ffffff;
  background: #E25C5B;
}
.innermenu {
  width: 150px;
  height: 100%;
}
.innermenu a {
  display: block;
  width: 120px;
  color: #ffffff;
  line-height: 30px;
  padding: 0 15px;
  text-decoration: none;
}
.innermenu a:hover {
  background: #1E222D;
}
.rightblock {
  min-height: 100vh;
  padding: 20px 25px;
  box-sizing: padding-box;
}