JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="showHome()">   
<div id="menu">
      <ul class="nav">
        <li><a href="#home" id="home_click">Home</a></li>
        <li><a href="#play" >Play</a></li>
        <li><a href="#service" >Service</a></li>
        <li><a href="#blog" >Blog</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
    <div class="info animated bounceInLeft" id="home" >Home</div>
    <div class="info animated bounceInLeft" id="play" >Play</div>
    <div class="info animated bounceInLeft" id="service" >Service</div>
    <div class="info animated bounceInLeft" id="blog" >Blog</div>
    <div class="info animated bounceInLeft" id="contact" >Contact</div>
 </body>

CSS

.info{
        background-color: #ffffff;
        max-width: 100%;
		min-width:250px;
        margin: none;
        text-align: center;
        height: auto;
        box-shadow: 0px 0px 1px #2e2e2e, 0px 0px 7px #5d5c5c;
        border-radius: 5px;
        display: flex;
        flex-direction: column; flex-wrap: wrap;
    }

/* Nav block*/

#home, #play, #service, #blog, #contact {
    display: none;
}

#home:target, #play:target, #service:target, #blog:target, #contact:target {
    display: table;
}
 /*Nav block end*/

/*animate.css*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform:...

JavaScript

function showHome(){
  document.getElementById('home_click').click();
}