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://unpkg.com/swiper/swiper-bundle.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://kit.fontawesome.com/8e0bceeac7.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></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>
                </div>
            </div>
            <div class="menu_reg_block">
   ...

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() {

    const swiper1 = new Swiper('.main-slide-gal', {
        loop: true,
        pagination: {
            el: '.swiper-pagination',
        },
        speed: 800,
        autoplay: {
            delay: 1000,
        }
    });


    /*Slide two start*/

    var totalSlide = $('.image-slider .swiper-slide').length;
    const swiper = new Swiper('.image-slider', {
        // Optional parameters
        slidesPerView: 3,
        spaceBetween: 30,
        centeredSlides: true,
        loop: true,
        loopedSLides: 3,
        simulateTouch: true,
        grabCursor: true,
        speed: 800,
        pagination: {
            el: '.swiper-pagination',
            type: 'progressbar'
        },
        navigation: {
            nextEl: '.swiper-button-next-custom',
            prevEl: '.swiper-button-prev-custom',
        },
        autoplay: {
            delay: 1000,
        }
    });


    function() {
        var fragment = document.querySelector('.image-slider__current');
        var idx = this.realIndex + 1;
        var tdx = this.slides.length - 2;
        fragment.innerHTML = (idx.toString().padStart(2, '0') + '/' + tdx.toString().padStart(2, '0'));
    }
    /*Slide two end*/


    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");
    });

});