JSFiddle - React, Tailwind, and code Playground

by take0844

HTML

<!DOCTYPE html>
<html>
<head>
	<title></title>
       	<link href="css/style.css" rel="stylesheet">
</head>
<body>
	<div class="body-wrapper">
		<header class="header">
			<div class="header-inner">
				<div class="header-left">
					<h1 class="logo"><a href="#"><img alt="" class="header-logo" src="./asserts/img/top-header-logo.png"></a></h1>
					<nav class="nav">
						<ul class="header-list">
							<li class="header-item">
								<a href="./Room/room.html">お部屋</a>
							</li><!-- /.header-item -->
							<li class="header-item">
								<a href="./Menu/menu.html">お料理</a>
							</li><!-- /.header-item -->
							<li class="header-item">
								<a href="./Onsen/onsen.html">温泉</a>
							</li><!-- /.header-item -->
						</ul><!-- /.header-list -->
					</nav><!-- /.nav -->
				</div>
				<div class="header-right">
					<div class="header-link" id="js-modal">
						<a class="calender-link js-modal-open" href="#"><!-- <img src="./img/calender.png" alt="カレンダー"> -->
						 宿泊予約</a>
					</div><!-- /.header-link -->
					<button aria-controls="js-glabal-menu" aria-expanded="false" class=" humburger" id="js-humburger" type="button"><span class="line"></span><span class="line"></span><span class="line"></span></button>
				</div><!-- /.header-right -->
			</div><!-- /.header-inner -->
		</header><!-- /.header -->
		<div class="overlay"></div><!-- /.overlay -->
	</div>
</body>
</html>

CSS

@charset "UTF-8";
.body-wrapper {
  overflow: hidden;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  color: #000000;
  min-width: 100vw;
}



a {
  text-decoration: none;
}

li {
  list-style: none;
}

.header {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  max-height: 80px;
  background-color: transparent;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 10px 20px;
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  .header {
    position: fixed;
    top: 0;
    padding: 15px 20px;
  }
}

@media screen and (max-width: 599px) {
  .header {
    position: fixed;
    top: 0;
    padding: 8px 10px;
    max-height: 60px;
  }
}

.header-inner {
  max-width: 1880px;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.header-left {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: left;
  -webkit-justify-content: left;
      -ms-flex-pack: left;
          justify-content: left;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.header-left h1 {
  display: block;
}

@media screen and (max-width: 599px) {
  .header-left h1 {
    width: 100px;
  }
}

.header-left h1 .logo img {
  display: block;
  max-width: 130px;
  width: 100%;
  height: 130px;
  margin: 20px 120px 20px 20px;
}

.header-left .nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content:...

JavaScript

/* 360未満のwindow responsive */
!(function () {
  const viewport = document.querySelector('meta[name="viewport"]');
  function switchViewport() {
    const value =
      window.outerWidth > 360
        ? 'width=device-width,initial-scale=1'
        : 'width=360';
    if (viewport.getAttribute('content') !== value) {
      viewport.setAttribute('content', value);
    }
  }
  addEventListener('resize', switchViewport, false);
  switchViewport();
})();

/* humberger-menu Drawer-Menu*/
/* humberger */

$(function(){

  $(".humburger").on('click', function(){
  
   if($(this).hasClass('_active')){
    $(this).removeClass('_active');
    $(".line").removeClass('_open');
  
    $("nav").removeClass("nav-open");
    // $(".drawer-nav").removeClass('_active');
    $('.overlay').removeClass('_open');
    $('html').removeClass('scroll-prevent') // 追記
  }
  else{
        $(this).addClass('_active');
        $('.line').addClass('_open');
  
        $("nav").addClass("nav-open");
        $('.overlay').addClass('_open');
        $('html').toggleClass('scroll-prevent') // 背景を固定 
  }
  });
  
   $('.overlay').on('click',function(){
  
      if($(this).hasClass('_open')){
  
        $(this).removeClass('_open');
        $('.humburger').removeClass('_active');
        $('.line').removeClass('_open');
  
        $("nav").removeClass('nav-open');   
        $('html').removeClass('scroll-prevent') // 追記
        // $('.drawer-nav').removeClass('_active');
  
      }
    }); 
  });