JSFiddle - React, Tailwind, and code Playground

by jquerybyexample

HTML

<script src="http://www.turnjs.com/turn.js"></script>
<div id='magazine'>
    <div><img src="https://lh5.googleusercontent.com/-YJMBqVobtwY/TWjA7XLPXDI/AAAAAAAABbs/vKQNd4U1C74/s1600/1298656123_blackboard+copy3.png" /> <br/> <p> Page 1 </p></div>
    <div> <img src="https://lh5.googleusercontent.com/-YJMBqVobtwY/TWjA7XLPXDI/AAAAAAAABbs/vKQNd4U1C74/s1600/1298656123_blackboard+copy3.png" /> <br/> <p> Page 2 </p> </div>
    <div> <img src="https://lh5.googleusercontent.com/-YJMBqVobtwY/TWjA7XLPXDI/AAAAAAAABbs/vKQNd4U1C74/s1600/1298656123_blackboard+copy3.png" /> <br/> <p> Page 3 </p> </div>
    <div> <img src="https://lh5.googleusercontent.com/-YJMBqVobtwY/TWjA7XLPXDI/AAAAAAAABbs/vKQNd4U1C74/s1600/1298656123_blackboard+copy3.png" /> <br/> <p> Page 4 </p> </div>
    <div> <img src="https://lh5.googleusercontent.com/-YJMBqVobtwY/TWjA7XLPXDI/AAAAAAAABbs/vKQNd4U1C74/s1600/1298656123_blackboard+copy3.png" /> <br/> <p> Page 5 </p></div>
</div>

CSS

#magazine{
    width:400px;
    height:300px;
    padding : 1px;
}
#magazine .turn-page{
    width:200px;
    height:300px;
    background-color:#ccc;
}
body
{
    font-family: Tahoma;
    font-size : 8pt;
    padding : 10pt;
}
img
{
    margin-top:40%;
    margin-left: 20%;
    text-align: center;
}
p
{
    
    text-align:center;
}

JavaScript

$(document).ready(function(){
    $('#magazine').turn();
});