JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container header">
    <!-- Лого -->
    <div class="logo">

      <div class="left_part">
        <div class="logo_img">
          <img src="http://viz-lp-repair-decoration.oml.ru/thumb/n80qG1hX28HdsFCR-hAI1w/-r100/1/fgs16_2-layers.png" alt="Логотип">
        </div>
        <div class="site_name">Название компании</div>
      </div>

      <div class="right_part">
        <div class="phones_part">
          <div class="work_time">
            Ежедневно: с 9:00 до 20:00
          </div>
          <div class="numbers">
            <span>+7900-000-00-00</span>
            <span>+7800-000-00-00</span>
          </div>
        </div>

        <div class="button_part">
          <a href=""><button>Обратная связь</button></a>
        </div>
      </div>

    </div>

  </div>
  
  <div class="container-fluid">
    <div class="picture">
      <img src="assets/images/empty_bg.png" alt="">
      <div class="text-in-picture">
        <div>
          Ремонт и отделка квартир
        </div>
        <div>
          ЛЮБОЙ СЛОЖНОСТИ С ГАРАНТИЕЙ РЕЗУЛЬТАТА
        </div>
      </div>
    </div>
  </div>

SCSS

.header {
    padding: 15px 0;

    .logo {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .left_part {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 27%;

        .site_name {
          font-size: 200%;
          font-weight: 600;
          line-height: 1.47;
          margin-top: 1%;
        }
      }

      .right_part {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 40%;

        .phones_part {
          display: flex;
          flex-direction: column;
          align-items: flex-end;

          .work_time {
            font-size: 90%;
            opacity: 0.7;
          }

          .numbers {
            font-size: 140%;
            display: flex;
          }
        }

        .button_part {
          a {
            button {
                   // Градиенты
                      background: -moz-linear-gradient(268deg, rgba(126,128,158,1) 0%, rgba(102,110,134,1) 21%, rgba(16,44,48,1) 100%);
                      /* ff3.6+ */
                      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(126,128,158,1)), color-stop(21%, rgba(102,110,134,1)),                       color-stop(100%, rgba(16,44,48,1)));
                      /* safari4+,chrome */
                      background: -webkit-linear-gradient(268deg, rgba(126,128,158,1) 0%, rgba(102,110,134,1) 21%, rgba(16,44,48,1) 100%);
                      /* safari5.1+,chrome10+ */
                      background: -o-linear-gradient(268deg, rgba(126,128,158,1) 0%, rgba(102,110,134,1) 21%, rgba(16,44,48,1) 100%);
                      /* opera 11.10+ */
                      background: -ms-linear-gradient(268deg, rgba(126,128,158,1) 0%, rgba(102,110,134,1) 21%, rgba(16,44,48,1) 100%);
                      /* ie10+ */
                      background:...