JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<script src="http://www.designandintention.com/Raikon/js/js.js"></script>
<script src="http://www.designandintention.com/Raikon/js/jquery.stellar.min.js"></script>
<script src="http://www.designandintention.com/Raikon/js/waypoints.min.js"></script>
<script src="http://www.designandintention.com/Raikon/js/jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" href="http://www.designandintention.com/Raikon/css/style.css">
<script src="http://fonts.googleapis.com/css?family=Lato:300,400,700"></script>
<div align="center" class="slide" id="slide1" data-slide="1" data-stellar-background-ratio=".7">
    
    
    <!-- I changed this DIV here -->
    <div id="nonfocus">
        <img src="https://www.google.com/images/srpr/logo11w.png" />
    </div>	
    <!-- I changed this DIV here -->
    
    
    <a class="button" data-slide="2" title=""></a>	
</div>
<!--End Slide 1-->
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.7">
    <div id="slide2text" data-stellar-ratio="1.8" data-stellar-vertical-offset="-102"> <span class="title">Experience</span>

        <p>With our wealth of experience, we bring a
            <Br>unique creative design to each and every project.</p>
    </div>	<span class="slideno">Furzehill</span>
	<a class="button" data-slide="3" title=""></a>	
</div>
<!--End Slide 2-->
<div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0.7">
    <div align="right" id="slide2text" data-stellar-ratio="1.8" data-stellar-vertical-offset="-102"> <span class="title">Progessive</span>

        <p>Always pushing the boundaries to the limit, we at
            <Br>Raikon believe that our team have the capability
            <br>to far exceed the standard of building development.</p>
    </div>	<span class="slideno">Furzehill</span>
	<a class="button" data-slide="4" title=""></a>	
</div>
<!--End Slide 3-->
<div class="slide"...

CSS

/*In change stuff here nofocus and nofocus img*/
#nonfocus {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    background-color:#FF0000;
}
#nonfocus img {
    top:0;
    left:0;
    position:fixed;
    z-index:1;
}
/*In change stuff here nofocus and nofocus img*/

@font-face {
    font-family:Roboto;
    src: url(Roboto-Light.ttf)
}
#slidemenu {
    font-size:22px;
    color:#394240;
    font-family:'Lato', sans-serif;
    font-weight:400;
    padding-top:60px;
    margin-left:0px;
    margin-right:0px;
    position:absolute;
    width:90%;
    height:40px;
    top:-50px;
    background:#e1d772;
    transition:top 1.5s;
    -webkit-transition:top 1.5s;
    /* Safari */
    -moz-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0 0px 10px 4px rgba(0, 0, 0, 0.3);
}
#slidemenu:hover {
    top:-10px;
    cursor:pointer;
}
#menuwrapper {
    width:90%;
    height:0px;
}
#slideforeground {
    background-image:url(../images/RForeground.png);
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    height:100%;
    width:100%;
}
#slide2text {
    color:#FFFFFF;
    font-family:Roboto;
    font-size:20px;
    position:absolute;
    left:80px;
    top:20px;
    text-shadow: 0px 0px 20px #000000;
}
#slide3text {
    position:absolute;
    right:40px;
    top:40px;
    color:#FFFFFF;
    font-family:Roboto;
    font-size:20px;
    text-shadow: 0px 0px 20px #000000;
}
.title {
    font-size:106px;
    text-shadow: 0px 0px 20px #000000;
    font-family:'Lato', sans-serif;
    font-weight:400;
}
#hrs {
    width:43px;
    height:23px;
    background-image:url(../images/button2.png);
    bottom:10px;
    left:20px;
    line-height:0px;
    position:absolute;
}