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="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="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="js/script.js"></script>
    <!-- <script src="js/preloader.js"></script> -->
    <title>Inter-Web</title>
</head>

<body>
    <<!-- div id="page-preloader" class="preloader" id="preloader">
        Int<span class="blink-one">e</span>r-w<span class="blink-two">e</span>b
        </div> -->
        <div class="bg"></div>
        <div...

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;
    overflow-x: hidden;
    line-height: 1;
}


.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;
}

section {
    height: 100vh;
    width: 100%;
    padding: 120px 0;
}

/*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 rgba(219, 66, 217, .5);
    animation:...

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');
	   	$('.contacts').toggleClass('contacts-move');
	});

	$('.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: "smooth",
				block: "start"
			})
		})
	}


	$(window).on('scroll',function(){

	  var link = $('.navbar a.dot');
	  var top = $(window).scrollTop();

	  $('section').each(function(){
	    var id = $(this).attr('id');
	    var height = $(this).height();
	    var offset = $(this).offset().top - 150;
	    if(top >= offset && top < offset + height){
	      link.removeClass('active');
	      $('.navbar').find('[data-scroll="' + id + '"]').addClass('active');
	    }
	  });

	});
});