JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NovaArt</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="header">
        <div class="menu">
            <nav class="nav">
                <ul class="header__ul">
                    <li class="header__li"><a href="#">Реквизиты</a></li>
                    <li class="header__li"><a href="#">Доставка</a></li>
                    <li class="header__li"><a href="#">Оплата</a></li>
                    <li class="header__li"><a href="#">Обмен/Возврат</a></li>
                    <li class="header__li"><a href="#">Контакты</a></li>
                </ul>
            </nav>
            <div class="location">
                <img src="images/header/Vector.png" alt="">
                <div>Москва</div>
                <img class="location__img" src="images/header/Arrov.png" alt="">
            </div>

            <div class="telephone">
                <div>+7 (022) 4481-951</div>
                <a class="tel__btn" href="tel:+7224481951">Заказать звонок</a>
            </div>
            <div class="icons">
                <img src="images/header/Heart.png" alt="">
                <img src="images/header/Person.png" alt="">
                <img src="images/header/shopping-basket.png" width="20px" height="20px" alt="">
                <div class="icons__num">15</div>
            </div>
        </div>
        <div class="header__content">
            <div class="logo">
                <img src="images/header/logo.png" alt="">
            </div>
            <div class="search">
                <input type="text" placeholder="Поиск">
                <img src="images/header/search.png" alt="" width="20px" height="20px">
            </div>
        </div>
        <div class="header__menu">
            <nav class="header__nav">
        ...

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');

* {
    font-family: Arial;
    margin: 0;
    padding: 0; 
}

.header {
    padding-top: 39px;
    padding:0px 43px;
    max-width: 1280px;
    margin: 0 auto;
}

.menu {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-height: 74px;
    align-items: center;
    border-bottom: 0.5px solid #B6B6B6;
}

.nav {
    width: 33%;
}

.header__ul {
    display: flex;
    justify-content: space-between;

}

.header__li {
    list-style-type: none;
}

.header__li>a {
    text-decoration: none;
    color: black;
    font-size: 0.875em;
    transition: 300ms;
}

.header__li>a::after {
    content: '';
    width: 0px;
    height: 1px;
    display: block;
    background: black;
    transition: 300ms;
}

.header__li>a:hover::after {
    width: 100%;
}

.location {
    display: flex;
    align-items: center;
    width: 9%;
    justify-content: space-between;
}

.location__img {
    cursor: pointer;
    transition: 300ms;
}

.location__img:hover {
    opacity: .7;
}

.telephone {
    display: flex;
    width: 24%;
    justify-content: space-between;
    align-items: center;
}

.tel__btn {
    color: #000;
    border-radius: 5px;
    text-decoration: none;
    border: 1px solid #000;
    font-size: 0.9375em;
    padding: 8px 18px;

    transition: 300ms;
}

.tel__btn:hover {
    border-radius: 0px;
    background-color: #FFC004;
    border: 1px solid #fff;
}

.icons {
    display: flex;
    width: 13%;
    justify-content: space-around;
    align-items: center;
}

.icons>img {
    cursor: pointer;
}

.icons__num {
    position: relative;
    padding: 4px 4px;
    border-radius: 12px;
    cursor: pointer;
    background-color: #DCA500;
    font-size: 0.625em;
    font-family: 'Roboto', sans-serif;
    top: 13px;
    right: 33px;
}
.header__content{
    display: flex;
    min-height: 100px;
    align-items: center;
    justify-content: space-between;
   ...