JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div id="sb-site">
    <!-- Your main site content. -->
    <div class='slide' id='slide1' data-slide='1' data-stellar-background-ratio='0.5'>
        <div class='container1'>
            <div class='row'>
                <div class='col-md-6 slide-1-logo'>
                    <!--<img src="img/avatar.png" class='maining'>-->
                </div>
                <div class="rotator">
                    <ul id="rotmenu">
                        <li>	<a href="rot1">Vision</a>

                            <div style="display:none;">
                                <div class="info_image">header2.png</div>
                                <div class="info_heading">Our Vision</div>
                                <div class="info_description">Create ICT as a driver to knowledge-based socioeconomic transformation initiatives.</div>
                            </div>
                        </li>
                        <li>	<a href="rot2">Mission</a>

                            <div style="display:none;">
                                <div class="info_image">cloud-future.png</div>
                                <div class="info_heading">Our Mission</div>
                                <div class="info_description">Catalyze the adoption and deployment of the-state-of-the-art ICT solutions among major socioeconomic sectors.</div>
                            </div>
                        </li>
                        <li>	<a href="rot3">Objectives</a>

                            <div style="display:none;">
                                <div class="info_image">cloud-computing.jpg</div>
                                <div class="info_heading">Our Objectives</div>
                                <div class="info_description">
                                    <marquee...

CSS

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-family:'Roboto', sans-serif;

}
.slide {
    padding:30px;

}
.button {
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: 55px;
    left: 50%;
    margin-left: -25px;
    background-image: url(../img/downarrow.png);
    background-size: 50px 50px;
    background-repeat: no-repeat;
}
#slide1 {
    height: 100%;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
    background-color: #FFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
    
    background-color: #00B4FF;
    /*background-image: url(../img/stardust.png);*/
}
#slide2 {
    /*background-image: url(../img/slide2/background2.jpg);*/
    /*background-image: url(../img/slide1/crossword.png);*/
    background-color: #000000;
    height: 100%;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
    background-color: #FFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
}
#slide3 {
    /*background-image: url(../img/slide2/green_cup.png);*/
    background-color: #00B4FF;
    height: 100%;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
    background-color: #FFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
}
#slide4 {
    /*background-image: url(../img/sprinkles.png);*/
    background-color: yellow;
    height: 100%;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
    background-color: #FFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
}
#slide5 {
    /*background-image: url(../img/escheresque_ste.png);*/
    background-color: #f8f8f8;
    height: 100%;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
    background-color: #FFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
}
/*#slide6{
    background-image: url(../img/washi.png);
    background-color: red;
}*/
 #slide6 {
   ...