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="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></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 href="css/owl.carousel.min.css" rel="stylesheet" type="text/css">
	<link href="img/favicon.png" rel="shortcut icon" type="image/x-icon" />
	<title>Giant</title>
	<script src="js/script.js"></script>
	<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@600;700;800&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
	<script src="js/owl.carousel.min.js" type="text/javascript"></script>
    <script src="https://kit.fontawesome.com/8e0bceeac7.js" crossorigin="anonymous"></script>
    <script src="js/carousel-3d.umd.js"></script>
    <script src="js/vue.min.js"></script>
</head>
<body>
	<section class="banner">
		<div class="header">
			<div class="wrapper">
				<a href="index.html" class="logo"><img src="img/logo.svg" alt="logo">Giant</a>
				
					<div class="hamburger_wrapper">
						<div class="hamburger hamburger--spin">
						  <div class="hamburger-box">
						    <div class="hamburger-inner"></div>
						  </div>
						</div>
					</div>
				
				<div class="menu">

					<ul>
						<li><a href="#">Home</a></li>
						<li><a href="#">Features</a></li>
						<li><a href="#">Pircing</a></li>
						<li><a href="#">Download Now</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="bg"></div>
		<div class="wrapper">
			
			<div class="content">
				<div class="banner_main_text">
					<h1>A Powerful & Unique<br>App Landing Template</h1>
				</div>

				<div class="banner_main_text_2">
					<p>Lorem ipsum dolor sit amet, consectetur...

CSS

.fz-title {
  font-size: 36px;
  line-height: 30px;
  font-weight: 600;
}
/*Basic settings*/
html,
body {
  width: 100%;
  height: 100%;
  font-family: 'Dosis', 'Arial';
  padding: 0;
  margin: 0;
}
section {
  padding: 120px 0 !important;
}
a {
  cursor: pointer !important;
}
h3 {
  font-size: 36px;
  line-height: 30px;
  font-weight: 600;
  color: #222222;
  margin-bottom: 20px !important;
}
p {
  font-family: 'Roboto', 'Arial';
  font-size: 14px;
  line-height: 24px;
  color: #777777;
  max-width: 600px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.wrapper {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto 0 auto;
  padding: 0 60px 0 60px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.bg {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #000;
  top: 0;
  left: 0;
  z-index: 100;
  display: none;
}
.content {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.content_move {
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
}
button {
  border: none;
  background-color: transparent;
  cursor: pointer;
}
/*Section banner*/
.banner {
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(#fd712c), to(#f21780));
  background: linear-gradient(90deg, #fd712c 0%, #f21780 100%);
  padding: 0 !important;
}
.banner .content {
  padding-top: 120px !important;
}
.banner_main_text h1 {
  font-size: 54px;
  line-height: 60px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 20px;
}
.banner_main_text_2 {
  font-family: 'Roboto', 'Arial';
  font-size: 14px;
  line-height: 24px;
  font-weight: 300;
  color: #ffffff;
  margin-bottom: 20px;
}
.banner_phone {
  background: url("../img/iPhones.png") no-repeat;
  background-size: contain;
  width: 836px;
  height: 571px;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 140px;
  float: right !important;
}
.banner p {
  color: #FFF !important;
  margin-left: 0...

JavaScript

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


    $(window).on('load resize ', function () {
        if ($(this).width() > 768) {
            $('.owl-carousel.features-slider').trigger('destroy.owl.carousel');
        } else {
            $('.owl-carousel.features-slider').owlCarousel({
                loop: true,
                margin: 0,
                responsiveClass: true,
                items: 1,
                nav: true,
                navText: ["<i class='fas fa-chevron-left'></i>", "<i class='fas fa-chevron-right'></i>"]
            });
        }
    });

    var contentHeight = $(".banner").outerHeight();
    var calcHeight = contentHeight - 70;

    $(window).scroll(function () {
        if ($(this).scrollTop() > calcHeight) {
            $('.hamburger_wrapper').addClass('black');
        } else {
            $('.hamburger_wrapper').removeClass('black');
        }
    });

    new Vue({
      el: '#example',
      data: {
        slides: [
           { id: 1, src: '/img/sliders/1.png' },
           { id: 2, src: '/img/sliders/2.png' },
           { id: 3, src: '/img/sliders/3.png' },
           { id: 4, src: '/img/sliders/4.png' },
           { id: 5, src: '/img/sliders/5.png' },
           { id: 6, src: '/img/sliders/6.png' },
           { id: 7, src: '/img/sliders/7.png' },
        ]
      },
      components: {
        'carousel-3d': window['carousel-3d'].Carousel3d,
        'slide': window['carousel-3d'].Slide
      }
    })

});