JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<body>
        <div> <!--gradient background-->
            <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#eeeeee"><path d="M143.19336,21.43001c-0.26705,0.00844 -0.53341,0.03181 -0.79785,0.06999h-34.89551c-2.58456,-0.03655 -4.98858,1.32136 -6.29153,3.55376c-1.30295,2.2324 -1.30295,4.99342 0,7.22582c1.30295,2.2324 3.70697,3.59031 6.29153,3.55376h18.53256l-66.59961,66.59961c-1.8722,1.79752 -2.62637,4.46674 -1.97164,6.97823c0.65473,2.51149 2.61604,4.4728 5.12753,5.12753c2.51149,0.65473 5.18071,-0.09944 6.97823,-1.97165l66.59961,-66.59961v18.53255c-0.03655,2.58456 1.32136,4.98858 3.55376,6.29153c2.2324,1.30295 4.99342,1.30295 7.22582,0c2.2324,-1.30295 3.59031,-3.70697 3.55376,-6.29153v-34.9235c0.28889,-2.08845 -0.35639,-4.19816 -1.76411,-5.76769c-1.40772,-1.56953 -3.43507,-2.43964 -5.54253,-2.3788zM35.83333,21.5c-7.83362,0 -14.33333,6.49972 -14.33333,14.33333v100.33333c0,7.83362 6.49972,14.33333 14.33333,14.33333h100.33333c7.83362,0 14.33333,-6.49972 14.33333,-14.33333v-43c0.03655,-2.58456 -1.32136,-4.98858 -3.55376,-6.29153c-2.2324,-1.30295 -4.99342,-1.30295 -7.22582,0c-2.2324,1.30295 -3.59031,3.70697 -3.55376,6.29153v43h-100.33333v-100.33333h43c2.58456,0.03655 4.98858,-1.32136 6.29153,-3.55376c1.30295,-2.2324 1.30295,-4.99342 0,-7.22582c-1.30295,-2.2324 -3.70697,-3.59031 -6.29153,-3.55376z"></path></g></g>
        </div>




    <div id="index">
        <header>

        </header>
        <main>

            <span style="font-size:30px;">Wahl, Wahrheit oder Pflicht?</span><br>

        </main>
        <footer>
            <button class="bottom-btn" onclick="show('index',...

CSS

*{
    margin:0;
    font-family:'Montserrat', serif;
    font-weight: bolder;
    outline:none;
}
body{
    text-align:center;
}
header{
    height:200px;
}

footer{
    height:120px;
    bottom:0;
    position:absolute;
    width:100%;
}
.bottom-btn{
    height:80px;
    padding:20px;
    appearance: none;
    background-color:#202020;
    border:none;
    margin:0 auto;
    display:block;
    color:white;
    font-size:20px;
    border-radius:10px;
    box-shadow: 5px 5px 30px rgba(0,0,0,0.4);
    transition:.3s;
    width:85%;
    bottom:0;
}
.bottom-btn:hover{
  cursor:pointer;
  box-shadow: 5px 5px 30px rgba(0,0,0,0.7);
}
.bottom-btn:active{
  box-shadow: 5px 5px 30px rgba(0,0,0,0);
}

JavaScript

function show(oldpage, newpage){
    document.getElementById(oldpage).style.display = 'none';



    document.getElementById(newpage).classList.add('animated', 'fadeInLeft');
    document.getElementById(newpage).style.display = 'block';
    setTimeout(function(){
    document.getElementById(newpage).classList.remove('animated', 'fadeInLeft');
  }, 1300);

}