JSFiddle - React, Tailwind, and code Playground

by lun471k

HTML

<script src="http://jfnoel.com/script/jquery.sidr.min.js"></script>
<link rel="stylesheet" href="http://jfnoel.com/css/jquery.sidr.dark.css">
<div class="container">
    <!--- PAGE 2 --->
    <div class="page2">
         <h1>Deel 2</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <a id="menu1" href="#menu1">Menu 1</a> 
        <div id="sidr 2">
            <!-- Your content -->
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
        </div>
    </div>
    <!--- PAGE 1 --->
<a name="mylocation"><div class="page1"><div class="pagecontainer">
<h1>This should be the beginning.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet,...

CSS

body {
    font-family: verdana;
    line-height: 1.2em;
    font-size:1.1em;
}
p {
    width: 100%;
}
.container {
    margin: 0px auto;
    width: 800px;
}
h1 {
    padding-bottom: 2em;
}
.pagecontainer {
    padding-top:9.8em;
    padding-bottom:10.2em;
}
.page1 {
    padding-top:2em;
}
.page2 {
    padding-top:2em;
}
.page3 {
    padding-top:2em;
    padding-bottom: 3em;
}

JavaScript

function moveWindow() {
    window.location.hash = "mylocation";
}

$('#menu1').sidr({
    name: 'page1',
    side: 'left' // By default
});
$('#menu2').sidr({
    name: 'page2',
    side: 'right'
});

$('#menu3').sidr({
    name: 'page3',
    side: 'left'
});