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="keywords" content="" />
    <meta name="description" content="" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- <script src="js/preloader.js"></script> -->
    <script src="https://kit.fontawesome.com/8e0bceeac7.js" crossorigin="anonymous"></script>
    <link rel="preload" as="font" href="fonts/rostov.woff2" type="font/woff2" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <link href="css/clear.css" rel="stylesheet">
    <link href="css/adaptive.css" rel="stylesheet">
    <link rel="stylesheet" href="css/hamburgers.min.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <link href="https://cdn.lazywasabi.net/fonts/NotoSansThai/NotoSansThai.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/8e0bceeac7.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="js/script.js"></script>
   ...

CSS

@font-face {
    font-family: 'Rostov';
    src: url('/fonts/rostov.eot');
    /* IE 9 Compatibility Mode */
    src: url('/fonts/rostov.eot?#iefix') format('embedded-opentype'),
        /* IE < 9 */
        url('/fonts/rostov.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('/fonts/rostov.woff') format('woff'),
        /* Firefox >= 3.6, any other modern browser */
        url('/fonts/rostov.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('/fonts/rostov.svg#rostov') format('svg');
    /* Chrome < 4, Legacy iOS */
}

/*Basic settings*/

html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #000;
    font-family: 'Noto Sans', sans-serif;
    box-sizing: border-box;
    line-height: 1;
    scroll-behavior: smooth;
}


.wrapper {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    max-width: 1800px;
    padding: 30px 60px;
    box-sizing: border-box;
}


.content {
    transition: 0.3s ease-out;
}


.content_move {
    transform: translateX(-300px);
}


a {
    text-decoration: none;
    cursor: pointer;
}

section {
    height: 100%;
    width: 100%;
    overflow: hidden !important;
}


/*Section preloader*/

.preloader {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: black;
    font-family: "Rostov";
    font-size: 135px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    transition: 1s all;
    opacity: 1;
    visibility: visible;
}

.preloader.done {
    opacity: 0;
    visibility: hidden;
}


.blink-one {
    text-shadow:
        0 0 10px rgba(255, 255, 255, .8),
        0 0 20px rgba(255, 255, 255, .8),
        0 0 22px rgba(255, 255, 255, .8),
        0 0 40px rgba(219, 66, 217, .8),
        0 0 60px rgba(219, 66, 217, .8),
        0 0 80px rgba(219, 66, 217, .8),
        0 0 100px rgba(219, 66, 217, .5),
        0 0 140px rgba(219, 66, 217, .5),
        0 0 200px...

JavaScript

jQuery(document).ready(function($) {
    var $hamburger = $(".hamburger");
    $hamburger.on("click", function(e) {
        $(this).toggleClass("is-active");
        $('.menu').toggleClass('menu-open');
        $('.bg ').toggleClass('bg_show');
        $('.content').toggleClass('content_move');
        $('.logo').toggleClass('logo-move');
        $('.contact_block').toggleClass('contact_block-move');
        $('html').toggleClass('no-scroll');
        $('.navbar').toggleClass('navbar_hide');
    });

    $('.menu ul li a').on('click', function() {
        $('.hamburger').removeClass("is-active");
        $('.menu').removeClass('menu-open');
        $('.bg ').removeClass('bg_show');
        $('.content').removeClass('content_move');
        $('.logo').removeClass('logo-move');
        $('.contact_block').removeClass('contact_block-move');
        $('html').removeClass('no-scroll');
        $('.navbar').removeClass('navbar_hide');
        $('.menu ul li a').removeClass('active-link');
        $(this).addClass('active-link');
    });

    $('.request').click(function(e) {
        e.preventDefault();
        $('.request-popup').fadeIn();
        $('html').addClass('no-scroll');
    });

    $('.close-popup').click(function() {
        $('.request-popup').fadeOut();
        $('html').removeClass('no-scroll');
    });


    $('.btn-main').click(function(e) {
        e.preventDefault();
        $('.submit-popup').fadeIn();
        $('html').addClass('no-scroll');
    });

    $('.close-popup').click(function(e) {
        e.preventDefault();
        $('.submit-popup').fadeOut();
        $('html').addClass('no-scroll');
    });

    const anchors = document.querySelectorAll('a[href*="#"]')

    for (let anchor of anchors) {
        anchor.addEventListener("click", function(event) {
            event.preventDefault();

            const blockID = anchor.getAttribute('href')
            document.querySelector('' + blockID).scrollIntoView({
                behavior:...