JSFiddle - React, Tailwind, and code Playground

by jquerybyexample

HTML

<script src="http://builtbywill.com/code/booklet/src/jquery.booklet.1.2.0.min.js"></script>
<link rel="stylesheet" href="http://builtbywill.com/code/booklet/src/jquery.booklet.1.2.0.css">
<script src="http://builtbywill.com/code/booklet/src/jquery.easing.1.3.js"></script>
<div id='magazine'>
    <div class="b-load">
    <div><img src="https://lh5.googleusercontent.com/-YJMBqVobtwY/TWjA7XLPXDI/AAAAAAAABbs/vKQNd4U1C74/s1600/1298656123_blackboard+copy3.png" /></div>
    <div> <img src="https://lh5.googleusercontent.com/-YJMBqVobtwY/TWjA7XLPXDI/AAAAAAAABbs/vKQNd4U1C74/s1600/1298656123_blackboard+copy3.png" /></div>
    <div> <img src="https://lh5.googleusercontent.com/-YJMBqVobtwY/TWjA7XLPXDI/AAAAAAAABbs/vKQNd4U1C74/s1600/1298656123_blackboard+copy3.png" /> </div>
    <div> <img src="https://lh5.googleusercontent.com/-YJMBqVobtwY/TWjA7XLPXDI/AAAAAAAABbs/vKQNd4U1C74/s1600/1298656123_blackboard+copy3.png" /> </div>
    <div> <img src="https://lh5.googleusercontent.com/-YJMBqVobtwY/TWjA7XLPXDI/AAAAAAAABbs/vKQNd4U1C74/s1600/1298656123_blackboard+copy3.png" /> </div>
    </div>
</div>

CSS

body
{
    font-family: Tahoma;
    font-size : 8pt;
    padding : 10pt;
}

div
{
    background-color: grey;
    height:400px;
}

img
{
    margin-top:60%;
    margin-left: 20%;
    text-align: center;
}

JavaScript

$(document).ready(function(){
    $('#magazine').booklet({
        width:  400,
        height: 400,
        pagePadding:1,
        speed : 300
   });
});