JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<div style="display:none" id="button1" value="div1" class="buttons font_typ_button_red">WELCOME</div>
<div  id="button2" value="div2" class="buttons font_typ_button_red" style="margin-top:7px;">ABOUT US</div>
<div  id="button3" value="div3" class="buttons font_typ_button_red">ABOUT OUR PRODUCTS</div>
<div  id="button4" value="div4" class="buttons font_typ_button_red">CONTACT</div>
<div  id="button5"  value="div5" class="buttons font_typ_button_red">SAMPLE KIT</div>

<div class="viz" id="button1div"> 
    LOAD IMAGE  LOAD IMAGE  LOAD IMAGE  LOAD IMAGE  LOAD IMAGE  LOAD IMAGE  LOAD IMAGE  LOAD IMAGE 
</div> 

<div class="home_page_margin_div tabs" style="display:none" id="button2div"> 
    <p>COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY COMPANY HISTORY 
    </p>
</div> 

<!--<div style='display: none' >-->
    <div id="button3div" class="scroll-pane tabs" style="display: none; width: 220px; height:221px;">
        <p>Vivamus  hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus  rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie  magna non est bibendum non venenatis nisl tempor. Suspendisse dictum  feugiat nisl ut dapibus.</p>
        <p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut...

CSS

.tabs {
    height: 100px;
}

JavaScript

$(document).ready(function() {
    $(".buttons").click(function() {
        var divname = this.id;
        //alert(divname);
        $(".viz").fadeOut(350, function() {
            $(".viz").removeClass("viz");
            $("#" + divname + "div").addClass("viz");
            $(".viz").fadeIn(350);
            $(".tabs").jScrollPane();
        });
    });
});