JSFiddle - React, Tailwind, and code Playground

by apaul34208

HTML

<div id='header'> <a href="http://markscamilleri.tumblr.com">
                    <div id="backbutton">
                        &nbsp;&nbsp;Back
                    </div>
                </a>

    <div class='wrap-centre'>
        <div id="headerbuttonsegment-left" style=" min-width: 150px; background-size: 150px 32px;">&nbsp;Bookshelf&nbsp;</div>
        <div class="headerbuttonsegment-centre" style=" min-width: 175px; background-size: 175px 32px;">Want to Read</div>
        <div id="headerbuttonsegment-right" style=" min-width: 150px; background-size: 150px 32px;">Favourites</div><a href="http://markscamilleri.tumblr.com" target="_blank"><div
                     id='creditsbutton'>
                        Credits
                        <!--Do not remove Credits!!-->
                    </div></a>

    </div>
</div>
<div id="shelf">
    <div class="flip">
        <div class="cover">
            <div class="face front">
                <img src="http://farm3.staticflickr.com/2866/8804333739_9d644bcdf6_o.jpg" width="125" />
            </div>
            <div class="face back">Hello World!</div>
        </div>
    </div>
    <div class="spacing"></div>
    <div class="flip">
        <div class="cover">
            <div class="face front">
                <img src="http://farm4.staticflickr.com/3809/8814925510_b53d082ea6_o.jpg" width="125" />
            </div>
            <div class="face back">Hello World!</div>
        </div>
    </div>

CSS

/*Sorted alphabetically*/
            * {
                margin: 0px;
                padding: 0px;
            }
            #backbutton {
                background-image:url("http://farm9.staticflickr.com/8538/8781018857_feef1c4e6e_o.png");
                background-position: center;
                background-repeat: no-repeat;
                background-size: 90px 32px;
                color:#FFFFFA;
                display: inline-block;
                font-family: Helvetica, Sans-Serif;
                font-size: 26px;
                float: left;
                min-width: 90px;
                padding: 4px 0px;
                text-align: center;
                text-shadow: 0px -0.9px 1px #1e160a, -0.9px 0px 1px #1e160a, 0.9px 0px 1px #f5eee2, 0px 0.9px 1px #f5eee2;
                z-index: 2;
            }
            body {
                background-image: url('http://farm3.staticflickr.com/2891/8769949843_f6b2b03c89_o.png');
                background-repeat: repeat-y;
                background-position: 0px 37px;
                background-size: cover;
            }
            #creditsbutton {
                background-image:url("http://farm4.staticflickr.com/3726/8769949955_3d28f7be67_o.png");
                background-position: center;
                background-repeat: no-repeat;
                background-size: 100px 32px;
                color:#FFFFFA;
                display: inline-block;
                font-family: Helvetica, Sans-Serif;
                font-size: 26px;
                float: right;
                min-width: 100px;
                padding: 4px 0px;
                text-align: center;
                text-shadow: 0px -0.9px 1px #1e160a, -0.9px 0px 1px #1e160a, 0.9px 0px 1px #f5eee2, 0px 0.9px 1px #f5eee2;
                z-index: 2;
            }
            .flip {
                display:inline-block;
                height: 185px;
                width: 125px;
            }
            .flip .cover {
            ...

JavaScript

$(function () {
    $('.flip').click(function () {
        $(this).find('.cover').toggleClass('flipped');
    });

    centered = function () {
        var wy = window.innerHeight / 2,
            wx = window.innerWidth / 2,
            py = 300,
            px = 300,
            pageTop = wy - py,
            pageLeft = wx - px;
        if ($('.cover').hasClass('flipped')) {
            $('.flipped').css({
                position: "absolute",
                top: pageTop,
                left: pageLeft
            });
        } else {
            $('.flip, .cover').removeAttr('style');
        }
    };

    $('.flip').click(centered);
    $(window).resize(centered);
});