JSFiddle - React, Tailwind, and code Playground

HTML

<div class="error"></div>

<div class="box0">
  <p>ペラ１ゾーク（偽物）： 大地底帝国</p>
  <p> ようこそゾーク（偽物）の世界へ！ あなたはどれだけ多くの宝物を持ってこの世界から脱出できるかな？
  </p>
  <p> ゲームの進行に応じてページが下のほうへスクロールして行きます。一番下がエンディングです。開始早々いきなり一番下までスクロールしないようにしましょう。
  </p>
  <div class="start"><a href="#00">＊ ＧＡＭＥ ＳＴＡＲＴ ＊</a></div>
</div>

<div class="box1" id="00">
  <p>あなたは今、白い家の南の野原に立っています。正面に白い家があります。 </p>
  <p>ここには小さな郵便箱があります。</p>
  <p>あなたは北を向いています。</p>
  <div class="arrow">&gt;</div>
  <div class="command">
    <a href="#01"><span class="dousuru">家を見る</span></a>
    <a href="#02"><span class="dousuru">手紙を<br>取る</span></a>
    <a href="#03"><span class="dousuru">郵便箱を<br>開ける</span></a>
    <a href="#04"><span class="dousuru">北に行く</span></a>
  </div>
</div>

<div class="box1" id="01">
  <p>丸い形の不思議な家です。壁はやわらかそうで、モコモコしています。</p>
  <div class="arrow">&gt;</div>
  <div class="command">
    <a href="#00"><span class="dousuru">HIT<br>HERE</span></a>
  </div>
</div>

<div class="box1" id="02">
  
  <div class="arrow">&gt;</div>
  <div class="command">
    <a href="#00"><span class="dousuru">HIT<br>HERE</span></a>
  </div>
</div>

<div class="box1" id="03">
<div class="arrow">&gt;</div>
  <div class="command">
    <a href="#00"><span class="dousuru">HIT<br>HERE</span></a>
  </div>
</div>

<div class="box1" id="04">
  家の前に来ました。
  <br> ここには玄関があります。
  <div class="arrow">&gt;</div>
  <div class="command">
    <a href="#"><span class="dousuru">玄関を開ける</span></a>
    <a href="#"><span class="dousuru">辺りを見る</span></a>
    <a href="#00"><span class="dousuru">南に行く</span></a>
  </div>
</div>

CSS

* {
  background-color: #000000;
  color: #ffffff;
  font-size: 20px;
  line-height: 25px;
}

.box0 {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  height: 100vh;
}

.box1 {
  width 100%;
  max-width: 640px;
  height: 200vh;
  margin: 300px auto;
  transition: .3s ease;
}


/*boxをぼかす*/

.box1.blur {
  filter: blur(3px);
  -webkit-filter: blur(3px);
}

.command {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
  height: 3em;
}

.dousuru {
  display: block;
  /*
  float: left;
  width: 86px;
  height: 48px;
  */
  margin: 5px;
  padding: 5px;
  border: 1px solid #ffffff;
  text-align: center;
  overflow: hidden;
  flex: 1;
  height: 100%;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
}

.arrow {
  margin: 2em 0;
  animation: beat .8s ease .6s infinite forwards;
}

.start {
  display: block;
  margin: 3em auto;
  text-align: center;
}

.error {
  display: block;
  position: fixed;
  bottom: -100%;
  left: 50%;
  transition: .3s ease;
  transform: translate(-50%, 0);
  color: #fff;
  padding: 10px;
  border: 1px solid #c99;
  border-radius: 5px 5px 0 0;
  width: 80%;
  text-align: center;
  font-size: 14px;
}

.error::before {
  content: "error";
  position: absolute;
  top: -0.8em;
  left: -0.8em;
  background-color: #c99;
  color: #fff;
  padding: 0 4px;
  border-radius: 3px;
}

.error.show {
  bottom: 0;
  transform: translate(-50%, 0);
}

@keyframes beat {
  0% {
    opacity: 0;
    margin-left: 0;
  }
  50% {
    opacity: 1;
    margin-left: 5px;
  }
  100% {
    opacity: 0;
    margin-left: 0px;
  }
}

JavaScript

var debounce = function(object, eventType, callback){
  var timer;

  object.addEventListener(eventType, function() {
    clearTimeout(timer);
    timer = setTimeout(function(){
      callback();
    }, 500);
  }, false);
};

(function($,deb) {
  
  var mailbox;
  mailbox = 0;

  // webkit系かそれ以外でターゲットを変更
  var
  ua = window.navigator.userAgent,
  browserTarget;
  pattern = /webkit/i;
  (pattern.test(ua)) ? browserTarget = "body": browserTarget = "html";
  
  var transitionEnd = "webkitTransitionEnd oTransitionEnd transitionend";

  //ターゲットスクロール関数
  function pageScroll(target) {
    var tgtOffset = $(target).offset().top;
    $(browserTarget).animate({
      scrollTop: tgtOffset
    }, 600);
  }

  var message = function(mes) {
    $(".error").text(mes).addClass("show");
    setTimeout(function() {
      $(".error").removeClass("show").empty();
    }, 5000)
  };

  var
    error_mes1 = "リンク(ID)が設定されていません";


	var check = function(id,menu){
  	console.log("id: %s | menu: %d", id,menu);
    
    if (id === "03" && menu === 0) {
      $("#02,#03").addClass("flag1"); // mainbox+
    }
    if (id === "02" && menu === 0) {
    	$("#02,#03").removeClass("flag1");
    }
    
  };

  //メイン
  $(function() {
    $("a").on("click", function(e) {
      e.preventDefault();
      
      var f = $(this).closest(".box1"),
      f_id = f.attr("id"),
      f_menu = f.find(".command a").index($(this));
      
      check(f_id,f_menu);
      
      var target = $(this).attr("href");
      if (target !== "#") {
        pageScroll(target);
      } else {
        message(error_mes1);
      }
      
      console.log(mailbox);
    });
    
    $("#02,#03").prepend("<div class='mesWindow'>");
    deb(window,"scroll",function(){
      if ( $("#02").hasClass("flag1") ){
        $("#02").find(".mesWindow").empty().append("<p>あなたは手紙を取りました。</p><p>手紙にはこうかいてあります。</p><p>「 ひとの手紙を勝手に読むのはどうかと思う。」</p><p> あなたは郵便箱にそっと手紙をしまいました。</p>");

      } else {
      ...