JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<script src="http://theconfluencegroup.com/new_site5/jquery.zoomooz.js"></script>
<link rel="stylesheet" href="http://janne.aukia.com/zoomooz/website-assets/website.css">
    <div class="zoomViewport slideshowContainer">
                <div class="zoomContainer">
                    <div class="zoomTarget">Target 1</div>
                    <div class="zoomTarget">Target 2</div>
                    <div class="zoomTarget">Target 3</div>
                    <div class="zoomTarget">Target 4</div>
                    <div class="zoomTarget">Target 5</div>
                    <div class="zoomTarget">Target 6</div>
                    <div class="clearer"></div>
                </div>
            </div>

            <div class="slideshowNavigation clearfix">
                <div class="zoomButton" data-type="prev" data-root=".slideshowContainer">&lt;</div>
                <div class="zoomButton" data-type="next" data-root=".slideshowContainer">&gt;</div>
            </div>

CSS

.slideshowContainer {
                background-color: #F8F8F8;
                border: 1px solid #EAEAEA;
                border-radius: 3px;
            }

            .slideshowContainer .zoomContainer .zoomTarget {
                background-color: white;
                border: 1px solid #EAEAEA;
                width:137px;
                height:50px;
                margin:10px;
                padding:20px;
                float:left;
            }

            .slideshowNavigation .zoomButton {
                font-size:32px;
                border: 1px solid #EAEAEA;
                padding: 20px;
                line-height:20px;
                float:left;
                margin-top:5px;
                margin-right:5px;
            }

            .slideshowNavigation .zoomButton:hover {
                background