JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width; initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="./static/css/main.css">
    <link rel="stylesheet" type="text/css" href="./static/css/media.css">

    <title>Главная</title>
</head>
<body>
    <section id="head">
        <div class="head__left_top-circle circle"></div>
        <div class="head__left-circle circle"></div>
        <div class="head__middle-circle circle"></div>
        <div class="head__middle_bottom-circle circle"></div>
        <div class="head__right_top-circle circle"></div>
        <div class="head container">
            <nav class="head__nav">
                <a href="/" class="head__logo"><img src="./media/logo.png" alt="">Sweava</a>
                <ul class="head__items">
                    <li class="head__item head__item_active"><a href="#">Home</a></li>
                    <li class="head__item"><a href="#">Team</a></li>
                    <li class="head__item"><a href="#">Faq</a></li>
                    <li class="head__item"><a href="#">Contact</a></li>
                </ul>
                <button class="head__button button">Download App</button>
                <div class="head__menu-mobile">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </nav>
            <div class="head__content">
                <div class="head__left">
                    <div class="head__title">Shopping App for Gadgets and Gifts</div>
                    <div class="head__description">Get 10% off your first order when you spend over £40 on any product!</div>
                    <button class="head__button button">Download App</button>
                </div>
                <div class="head__right">
                    <img src="./media/Sally-4.png"...

CSS

html{display: block;}body{max-width:100%;font-family:'Raleway',sans-serif;margin:0;padding:0;}h1,h2,h3,h4,h5{margin:0;}button{outline:none;cursor:pointer;background:none;border:none;}img{width:inherit;}section{height:800px;}a{text-decoration:none;color: inherit;}ul{list-style:none;margin:0;padding:0;}

.circle {
    position: absolute;

    border-radius: 100%;
}

/* Head */
.head__left_top-circle {
    width: 222px;
    height: 222px;

    top: -90px;
    left: -30px;

    background-color: #FFDC5F;

    z-index: -1;
}

.head__left-circle {
    width: 58px;
    height: 58px;

    top: 50%;
    left: 3%;

    background-color: #FAB8C3;

    z-index: -1;
}

.head__middle-circle {
    width: 50px;
    height: 50px;

    top: 20%;
    left: 50%;

    background-color: #FFDC5F;

    z-index: -1;
}

.head__middle_bottom-circle {
    width: 110px;
    height: 110px;

    top: 72%;
    left: 38%;

    background-color: #FFDC5F;

    z-index: -1;
}

.head__right_top-circle {
    width: 1032px;
    height: 1032px;

    top: -310px;
    right: -460px;

    background-color: #5956E9;

    z-index: -1;
}

/* Content */
.left-top-figures {
    position: absolute;
}

.right-bottom-figures {
    position: absolute;

    align-self: flex-end;

    margin-left: 290px;
}

.left-bottom-figures {
    position: absolute;
    
    align-self: flex-end;

    margin-bottom: 15px;
}

.right-top-figures {
    position: absolute;

    align-self: flex-start;

    margin-left: 395px;
    top: -10px;
}

.info__block-5 .right-top-figures {
    margin-left: 410px;
}

.info__block-5 .left-bottom-figures {
    margin-bottom: 55px;
}

/* Copyright */
#copyright {
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;

    margin-top: 180px;
}

#copyright span {
    color: #5C5C5C;
}
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');

.container {
    max-width: 80%;

    margin: 0...