JSFiddle - React, Tailwind, and code Playground

by Raloynner

HTML

<main class="page">
        <header class="header">
            <div class="container">
                <div class="header-inner">
                    <a href="#" class="header-logo">
                        <img src="img/svg/logo.svg" alt="#" class="header-logo_img">
                    </a>
                    <nav class="header-nav">
                        <a href="#" class="header-nav-item">Как это работает</a>
                        <a href="#" class="header-nav-item">Частные вопросы</a>
                        <a href="#" class="header-nav-item">Обратная связь</a>
                    </nav>
                    <button class="header-btn">Интернет банк</button>
                </div>
            </div>
        </header>

        <section class="main">
            <div class="container">
                <div class="main-inner">
                    <div class="main-info">
                        <h1 class="h1">Заработай себе на лимон</h1>
                        <p class="subtitle1">Получай деньги за приглашение, в мобильном приложение “Mbank”</p>
                    </div>
                    <div class="main-wrapper">
                        <img src="img/png/image-1.png" alt="#" class="main-wrapper_img">
                    </div>
                </div>
            </div>
        </section>
    </main>

SCSS

// тут будешь писать все свои стили остальные
.page {
  position: relative;
}

.header {
  width: 100%;
  background: #0A0624;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 60px 0 105px;
  @media (max-width: 1200px) {
    padding: 32px 0 64px 0;
  }
  @media (max-width: 1200px) {
    padding: 32px 0 32px 0;
  }
  @media (max-width: 640px) {
    padding: 32px 0 6px 0;
  }
}

.header-inner {
  width: 100%;
  max-width: 1920px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-logo {
  border-radius: 50%;
}

.header-logo_img {
  border-radius: 50%;
  @media (max-width: 1200px) {
    height: 37px;
    width: 36px;
  }
}

.header-nav {
  display: flex;
  @media (max-width: 960px) {
    display: none;
  }
}

.header-nav-item {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  color: #F7F7F7;
}

.header-nav-item:not(:last-child) {
  margin-right: 36px;
}

.header-btn {
  padding: 8px 16px;
  background-color: transparent;
  border: 1px solid #EBEBEB;;
  border-radius: 8px;

  font-style: normal;
  font-weight: 500;
  @include responsiveFonts(18, 15);
  line-height: 211%;
  color: #FCFDFF;
  @media (max-width: 1200px) {
    padding: 4px 16px;
  }
}

.main {
  width: 100%;
  display: flex;
  background: #0A0624;
  padding-top: 226px;
  @media (max-width: 1200px) {
    padding-top: 137px;
  }
  @media (max-width: 960px) {
    padding-top: 110px;
  }
  @media(max-width: 640px) {
    padding-top: 96px;
  }
}

.main-inner {
  background: url("../img/png/BANK.png") center no-repeat;
  background-size: 100%;
  background-position-y: -30%;
  width: 100%;
  display: flex;
  align-items: center;
  padding-top: 30px;
  @media (max-width: 640px) {
    background-position-y: -17.5%;
    padding-top: 40px;
  }
}

.main-info {
  display: flex;
  flex: 0 0 420px;
  flex-direction: column;
  width: 420px;
  margin-right: 130px;
  padding-bottom: 30px;
  @media (max-width: 960px) {
    width: 300px;
 ...