JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<body>
  <div class="headline">
    <h2><a href="homepage.html">ゆうげん</a></h2>
  </div>
  <div class="subtitle">
    <h3>yuugen</h3>
  </div>
  <header>
    <div id="nav-wrapper">
      <ul id="nav">
        <li><a class="navlink" href="gallery.html">gallery.</a></li>
        <li><a class="navlink" href="test.html">test.</a></li>
        <li><a class="navlink" href="information.html">info.</a></li>
        <li><a class="navlink" href="contact.html">contact.</a></li>
      </ul>
    </div>
    <div id="settings">
      <button class="normalmode">normalmode</button>
      <button class="darkmode">darkmode</button>
    </div>
  </header>
  <div class="line"></div>
  <p>
    slideshohw
  </p>

</body>

CSS

a {
  text-decoration: none;
}

p {
  font-family: Rajdhani;
  font-size: 12px;
  letter-spacing: 2px;
}

li {
  list-style: none;
}

.line {
  border-bottom: 1px solid lightgray;
  width: 100%;
}

* {
  margin: 0;
  padding;
  0;
}

/* general */

/* header */

#nav-wrapper {
  text-align: center;
  margin: auto;
  width: 100%;
  font-family: Rajdhani;
}

#nav {
  text-align: center;
  padding: 34px 0;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}

@media screen and (min-width: 700px) {
  #nav li {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    float: left;
    padding: 0px 22px;
  }
}

.navlink {
  opacity: 1;
  color: black;
  font-style: normal;
  font-weight: 300;
  font-size: 11px;
  line-height: 13px;
  letter-spacing: 0.14em;
  padding: 2px;
  text-transform: lowercase;
  -webkit-transition: 0.4s;
  -moz-animation: 0.4s;
  -o-animation: 0.4s;
  -ms-animation: 0.4s;
  transition: 0.4s;
}

.navlink:hover {
  color: black;
  font-weight: 400;
  letter-spacing: 2px;
  opacity: 0.8;
  -webkit-transition: 0.4s;
  -moz-animation: 0.4s;
  -o-animation: 0.4s;
  -ms-animation: 0.4s;
  transition: 0.4s;
}

/* header */

h2 {
  font-size: 80px;
  font-family: Kaushan Script;
  color: black;
  text-align: center;
  font-weight: 100;
  letter-spacing: 2px;
}

h2 a {
  color: black;
  -webkit-transition: 0.4s;
  -moz-animation: 0.4s;
  -o-animation: 0.4s;
  -ms-animation: 0.4s;
  transition: 0.4s;
}

h2 a:hover {
  color: white;
  -webkit-transition: 0.4s;
  -moz-animation: 0.4s;
  -o-animation: 0.4s;
  -ms-animation: 0.4s;
  transition: 0.4s;
}

h3 {
  font-size: 20px;
  font-family: Homemade Apple;
  color: black;
  text-align: center;
  margin-top: -20px;
}

body.darkclass h3,
body.darkclass a {
  background-color: black;
  color: white;
}

JavaScript

$(document).ready(function($) {
	var mode = localStorage.getItem('mode');
  if (mode) 
  	$('body').addClass(mode);

  $(".darkmode").click(function() {
    $("body").addClass("darkclass");
    localStorage.setItem('mode', 'darkclass');
  });

  $(".normalmode").click(function() {
    $("body").removeClass("darkclass");
    localStorage.setItem('mode', null);
  });
});