JSFiddle - React, Tailwind, and code Playground

by Maxim_Wolf

HTML

<div class="container">

<header class="header">
  <h1 class="logo">
  <img src="https://cdn.pixabay.com/photo/2021/09/08/05/38/network-6605645_960_720.png">
  logo
  <span>moto</span>
  </h1>
  <ul class="menu menu--header">
  <li>Автомобили</li>
  <li>Контакты</li>
  <li>Услуги</li>
  <li>Вакансии</li>
  </ul>
</header>
<main>
  
</main>
<footer class="footer">
 <ul class="menu">
  <li>Корпоративным клиентам</li>
  <li>Клиентам</li>
  <li>Аренда авто</li>
  <li>Каршеринг</li>
  <li>Как продать авто</li>
  </ul>
</footer>
</div>

CSS

.container{
  display:grid;
  min-height:100vh;
  grid-template-rows:auto 1fr auto;
  justify-content:space-around;
  
}
.footer{
  max-width:1200px;
}
.menu{
  display: flex;
  list-style-type:none;
  margin:0;
  padding:0;
}
.menu--header{
  
}
.menu li{
  display: inline-block;
  padding: 1em;
}
.header{
  display: flex;
  justify-content: space-between;
  place-self:center stretch;
  max-width:1200px;
}
.logo{
  display: grid;
  grid-template-columns: auto 1fr;
}

.logo img{
  width:4rem;
  height:4rem;
  grid-row: 1 / span 2;
}
.logo span{
  font-size:1rem;
  font-weight:normal;
}