JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta content="width=device-width,initial-scale=1" name="viewport">
  <!-- 概要 -->
	<meta content="My Portfolio" name="description">
	<title>Reverie</title>
  <!-- ファビコン↓ -->
	<link href="favicon.ico" rel="shortcut icon">
  <!-- スマホ等向けファビコン -->
	<link href="seahorse.png" rel="apple-touch-ico">
	<link href="css/styles.css" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
	<header>
		<div class="container header-container">
      <div class="sns-icons">
        <div class="instagram-btn">
          <a href="https://www.instagram.com/xxy0/" target="_blank"><i class="fab fa-instagram"></i></a>
        </div>
        <div class="facebook-btn">
          <a href="https://www.facebook.com/profile.php?id=100021649801829" target="_blank"><i class="fab fa-facebook-f"></i></a>
        </div>
        <div class="twitter-btn">
          <a href="https://twitter.com/Phycodurus3" target="_blank"><i class="fab fa-twitter"></i></a>
        </div>
      </div>
			<div class="header-inner">
				<h1 class="header-logo">
          <a href="./index.html"><img alt="logo" src="img/Reverie.png" srcset="img/Reverie.png 1x,img/[email protected] 2x"></a>
        </h1>
        </div>


        <!-- menu -->
        <div class="nav-container">
          <input id="my-parts-checkbox" class="my-parts-hidden icon-hamburger" type="checkbox">
          <label id="my-parts-icon" for="my-parts-checkbox"><span></span></label>
        <!-- </div> -->
        <!-- <div class="nav-container"> -->
          <nav class="menu-container">
            <ul class="menu">
              <li class="menu-item"><a href="about/index.html">About</a></li>
              <li class="menu-item"><a href="works/index.html">Works</a></li>
              <li class="menu-item"><a...

CSS

@charset "UTF-8";

/* 共通 */
html,body {
  font-size: 16px;
  font-family: sans-serif;
  color: #393939;
  background: #fff;
}

body,div,p,h1,h2,h3,h4,ul {
  margin: 0;
  padding: 0;
}

img {
  width: 100%;
  height: auto;
}

a {
  color: black;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

i {
  font-size: 24px;
  color: #555555;
}

/* 共通の見出し */
main h1 {
  margin-bottom: 1rem;
  font-weight: normal;
  font-size: 16px;
}

.container {
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
  max-width: 1000px;
  height: auto;
}

/* ヘッダー */
header {
  background: #fff;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.header-logo {
  padding: 0;
  width: 400px;
  height: 180px;
}

.sns-icons {
  float: right;
  margin-top: 100px;
  display:flex;
}

.instagram-btn,
.facebook-btn,
.twitter-btn {
  padding-left: 20px;
}


@media screen and (min-width: 768px) {
  .header-logo {
    width: 400px;
    height: 180px;
  }
  .header-container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .header-logo {
    padding: 20px 0;
  }
}

/* menu */
.icon-hamburger {
  background: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
  height: 50px;
  position: relative;
  width: 50px;
  display: none;
  margin-bottom: 0.4em;
}

.icon-hamburger span {
  background: #cccccc;
  display: block;
  height: 16%;
  left: 50%;
  margin: -8% 0 0 -42%;
  position: absolute;
  top: 50%;
  width: 84%;
}

.icon-hamburger span::before,
.icon-hamburger span::after {
  background: #cccccc;
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  margin: -8% 0 0 -50%;
  position: absolute;
  top: 50%;
  width: 100%;
}

.icon-hamburger span::before {
  margin-top: -38%;
}

.icon-hamburger span::after {
  margin-top: 19%;
}

@media screen and (max-width: 767.98px) {
  .icon-hamburger {
    display: inline-block;
  }
}
/* 追加 */
.my-parts-hidden {
  display: none;
}

#my-parts-icon {
  cursor:...

JavaScript

jQuery(function($) {

  jQuery('.icon-hamburger').on('click', function() {
  if(jQuery('.menu-container .menu').css('display') === 'block') {
    jQuery('.menu-container .menu').slideUp('1500');
  }else {
    jQuery('.menu-container .menu').slideDown('1500');
  } 
});


   

  // #back-to-topがクリックされたら上に戻る
  $('#back-to-top a').click(function() {
    $('html,body').animate({scrollTop:0},500,'linear');
    return false;
  });


});