JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/clear.css">
    <link rel="stylesheet" href="css/adaptive.css">
    <link rel="stylesheet" href="css/hamburgers.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <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=Playfair+Display:wght@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=Lato: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=Lora:wght@400;500;700&display=swap" rel="stylesheet">
    <title>Frispes</title>
    <script src="js/script.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
    <script src="https://kit.fontawesome.com/8e0bceeac7.js" crossorigin="anonymous"></script>
</head>

<body>
    <div class="bg"></div>
    <header>
        <div class="wrapper">
            <div class="logo">
                <h2>Frispes.</h2>
            </div>
            <div class="hamburger_wrapper">
                <div class="hamburger hamburger--spin">
                    <div class="hamburger-box">
                        <div class="hamburger-inner"></div>
                    </div>
               ...

CSS

@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato-Medium.eot');
  src: url('/fonts/Lato-Medium.eot?#iefix') format('embedded-opentype'), url('/fonts/Lato-Medium.woff') format('woff'), url('/fonts/Lato-Medium.ttf') format('truetype');
  font-weight: 500;
}
/*Basic settings*/
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  line-height: 1;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
}
section {
  padding: 60px 0 !important;
}
a {
  cursor: pointer !important;
}
.wrapper {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto 0 auto;
  padding: 0 60px 0 60px;
  box-sizing: border-box;
}
.bg {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
  z-index: 2;
}
.bg_show {
  visibility: visible;
  opacity: 1;
}
.content {
  transition: 0.3s ease-out;
}
.content_move {
  transform: translateX(-200px);
}
/*Header*/
header {
  padding: 30px 0 !important;
}
header .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.logo {
  transition: 0.3s;
}
.logo h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: #10375c;
  font-size: 24px;
}
.logo_move {
  transform: translateX(-200px);
}
.menu_reg_block {
  display: flex;
  justify-content: space-between;
  transition: 0.3s;
  z-index: 1;
}
.menu {
  padding-left: 20px;
}
.menu ul {
  display: flex;
}
.menu ul li {
  color: #222831;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin-right: 40px;
  transition: 0.3s;
}
.menu ul li:last-child {
  margin-right: 0 !important;
}
.menu ul li a {
  transition: 0.3s;
}
.menu ul li a:hover {
  color: #ff5722;
}
.registration {
  display: flex;
  padding-left: 100px;
}
.registration a {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #ff5722;
  transition: 0.3s;
 ...

JavaScript

$(document).ready(function() {

    var $hamburger = $(".hamburger");
    $hamburger.on("click", function(e) {
        $(this).toggleClass("is-active");
        $('.menu_reg_block').toggleClass("menu_reg_block_open");
        $('.content').toggleClass("content_move");
        $('.logo').toggleClass("logo_move");
        $('.bg').toggleClass("bg_show");
    });


    $(".main-gal.owl-carousel").owlCarousel({
        autoplay: true,
        slideSpeed: 2000,
        items: 1,
        autoHeight: true,
        loop: true,
        nav: false,
        center: true,
        dots: true,
        responsiveClass: true,
        smartSpeed: 800,
        margin: 0,
        responsive: {
            0: {
                items: 1,
                margin: 0,
                dots: false,
                nav: true
            },
            768: {}
        },
    });


    $(".spaces-gal.owl-carousel").owlCarousel({
        autoplay: true,
        slideSpeed: 2000,
        items: 3,
        autoHeight: true,
        loop: true,
        dots: true,
        nav: true,
        navText: ["<i class='fas fa-arrow-left'></i>", "<i class='fas fa-arrow-right'></i>"],
        center: true,
        dots: true,
        responsiveClass: true,
        smartSpeed: 800,
        margin: 30,
        responsive: {
            0: {
                items: 1,
                margin: 0,
                dots: false,
                nav: true
            },
            768: {}
        }
    });

    $('.spaces-gal').on('initialized.owl.carousel changed.owl.carousel', function(e) {
        if (!e.namespace) {
            return;
        }
        var carousel = e.relatedTarget;
        $('.spaces-slide-counter').text(carousel.relative(carousel.current()) + 1 + '/' + carousel.items().length);
    }).owlCarousel({
        items: 1,
        loop: true,
        margin: 0,
        nav: true
    });
});