JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header" id="header">
            <div class="header__line"></div>
            <div class="container">
                <div class="header__inner">
                    <div class="header__logo">
                        <img src="images/logo.png" alt="Plutos">
                    </div>
                    <nav class="menu" id="menu">
                        <div class="header__menu">
                        <a href="#about" class="header__link">Стратегия</a>
                        <a href="#graphic" class="header__link">Показатели</a>
                        <a href="#founder" class="header__link">Основатель</a>
                        <a href="#contact" class="header__link">Контакты</a>
                    </div>
                    <div class="header__phone">
                        <img src="images/icons/tel.svg" alt="telephone">
                        <a href="tel:+72334567">+7 (800) 233-45-67</a>
                    </div>
                    </nav>
                
                    <button class="menu__toggle" id="menu__toggle" type="button">
                        <span class="menu__toggle__item">Menu</span>
                    </button>
                </div>
                <div class="header__content">
                    <div class="header__card">
                        <div class="header__top">
                        <h4 class="header__start">НАЧНИ ИНВЕСТИРОВАТЬ</h4>   
                    </div>
                    <div class="header__bottom">
                        <img src="images/icons/arrowRight.svg" alt="arrowRight">
                        <strong class="header__join">Присоединиться к фонду</strong>
                    </div>  
                    <div class="header__opacity"></div>
                    </div>  
                    <div class="swiper-container mySwiper swiper">
                        <div class="swiper-wrapper">
                          <div class="swiper-slide">
                              <div...

SCSS

.container {
    max-width: $maxWidthConatiner + px;
    padding: 0px 15px;
    margin: 0 auto;
}

// HEADER ===============================

.header {
    background: url(../images/home/bg.jpg) 0 0/cover no-repeat;
    min-height: 690px;

    &__line{
        width: 100%;
        height: 1px;
        background-color: #E0E0E0;
        position: relative;
        top: 71px;
    }
    &__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;

        min-height: 70px;
        
    }

    &__link {
        font-weight: 600;
        font-size: 15px;
        color: #fff;

        padding: 0px 35px 0px 0px;
    }

    &__phone {
        display: flex;
        align-items: center;

        img {
            padding: 0px 7px 0px 0px;
        }

        a {
            font-family: Oswald;
            font-size: 15px;
            color: #fff;
        }
    }

    &__content{
        margin: 60px 0px 0px 0px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    &__card{
        width: 250px;
        height: 332px;
        padding: 40px;
        margin: 0 50px 0 0;
        position: relative;
        background-color: #fff;

        display: flex;
        flex-direction: column;
        justify-content: space-between;

    }
    &__start{
        color: #363847;

        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.09em;

    }
    &__opacity{
        height: 100%;
        width: 1000px;
        background-color: #fff;
        opacity: 0.5;
        position: absolute;
        right: -1000px;
        top: 0;
    }
    &__title{
        color: #fff;
        font-size: 36px;
        text-shadow: 0px 4px 25px rgba(135, 143, 154, 0.25);
        font-family: 'Oswald';
        font-weight: 500;
        margin: 0px 0px 20px 0px;
    }
    &__info{
        font-size: 18px;
        text-shadow: 0px 4px 4px rgba(135, 143, 154, 0.4);
        color: #FFFFFF;
       ...