JSFiddle - React, Tailwind, and code Playground

by shakibdshy

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="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.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></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...

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


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


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



    $('.owl-prev').on('click', function(event) {
        event.preventDefault();
        $(this).css("color", "#FF5722")
        $('.owl-next').css("color", "#000")
    });


    $('.owl-next').on('click', function(event) {
        event.preventDefault();
        $(this).css("color", "#FF5722")
        $('.owl-prev').css("color", "#000")
    });


    let mySliderAllSlides = document.querySelector('.image-slider__total');
    let mySliderCurrentSlide = document.querySelector('.image-slider__current');

    mySliderAllSlides.innerHTML = myImageSLider.slides.length;

    myImageSLider.on('slideChange',  function() {
        let currentSlide = ++myImageSLider.realIndex;
        mySliderCurrentSlide.innerHTML = currentSlide;
    });


    var $hamburger =...