JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="main-menu">
<nav class="header-menu">
<a href="#basic">Услуги</a>
<a href="">Портфолио</a>
<a href="">Стоимость</a>
</nav>
<div class="right">
<span class="telephone">+7 (499) 995-55-77</span>
<button type="button" class="call-me">Заказать звонок</button>
</div>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
background-color: greenyellow;
}
.main-menu {
display: flex;
}
.header-menu a {
color: black;
text-decoration: none;
font-family: "Roboto", Arial, sans-serif;
margin-right: 25px;
}
.header-menu a:hover {
color: #ff4e2e;
text-decoration: underline;
}
.telephone {
color: #1f1f24;
font-family: Roboto;
font-size: 25px;
font-weight: 700;
padding-right: 30px;
}
.right {
width: 470px;
}
.call-me {
background-color: transparent;
color: #f53f4f;
border: 1px solid #f82370;
width: 207px;
height: 45px;
font-family: "Roboto", Arial, sans-serif;
font-size: 16px;
font-weight: 400;
}