JSFiddle - React, Tailwind, and code Playground

by James Doyle

HTML

<script src="http://fredhq.com/assets/projects/roundabout/jquery.roundabout.min.js"></script>
<ul class="roundabout-holder" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; position: relative; z-index: 100; ">
        <li class="roundabout-moveable-item" style="position: absolute; left: 296.4px; top: 124.8px; width: 190.2368px; height: 146.336px; opacity: 0.46; z-index: 129; font-size: 7.32px; " current-scale="0.4573">
            <div class="stage">
                <h3>Move Elements with Style</h3>
                
                <p class="intro">
                    Quickly convert simple, semantic HTML structures<br>
                    into a sexy interactive turntables!
                </p>
                
                <div class="how-to">
                    <span class="left arrow">←</span>
                    <span class="right arrow">→</span>
                    
                    <strong>To Spin The Wheel</strong>
                    Click a box in the back.
                </div>
            </div>
        </li>
        <li class="back roundabout-moveable-item" style="position: absolute; left: 311px; top: 71.2px; width: 329.7632px; height: 253.664px; opacity: 0.79; z-index: 296; font-size: 12.68px; " current-scale="0.7927"><h3>Shazam!</h3></li>
        <li class="back roundabout-moveable-item roundabout-in-focus" style="position: absolute; left: 47.2px; top: 38px; width: 416px; height: 320px; opacity: 1; z-index: 400; font-size: 16px; " current-scale="1.0000"><h3>Amazing!</h3></li>
        <li class="back roundabout-moveable-item" style="position: absolute; left: -130.3px; top: 71.2px; width: 329.7632px; height: 253.664px; opacity: 0.79; z-index: 296; font-size: 12.68px; " current-scale="0.7927"><h3>Yes, sir!</h3></li>
        <li class="back roundabout-moveable-item" style="position: absolute; left: 23.7px; top: 124.8px; width: 190.2368px; height: 146.336px; opacity: 0.46; z-index: 129; font-size: 7.32px; "...

CSS

.roundabout-holder { 
    padding: 0; 
    margin-top: 100px;
    height: 5em; 
    list-style-type: none 
}
.roundabout-moveable-item {
    height: 250px; 
    width: 500px; 
    cursor: pointer;
    background: #ffc;
    border: 1px solid #999;
}
.roundabout-in-focus { 
    cursor: auto; 
}

JavaScript

$(document).ready(function() {
    $('ul#myRoundabout').roundabout();
});