JSFiddle - React, Tailwind, and code Playground

by SO_AMK

HTML

<link rel="stylesheet" href="http://mediabrands.com.au/anatomy/dial/src/dial.css">
<script src="http://mediabrands.com.au/anatomy/dev/js/foundation.js"></script>
<script src="http://mediabrands.com.au/anatomy/dev/js/jquery.color.js"></script>
<div id="dial-wrapper">
    <div id="dial" style="display: block; ">
        <div class="component" id="outer">
            <div class="tab" id="ensemble">
                <div style="display: block; opacity: 0; ">
                </div>
            </div>
            <div class="tab" id="orion">
                <div style="display: block; opacity: 0; ">
                </div>
            </div>
            <div class="tab" id="cadreon">
                <div style="display: block; opacity: 0; ">
                </div>
            </div>
            <div class="tab" id="ansible">
                <div style="display: block; opacity: 0; ">
                </div>
            </div>
            <div class="tab" id="magnaglobal">
                <div style="display: none; ">
                </div>
            </div>
            <div class="tab" id="airborne">
                <div style="display: block; opacity: 0; ">
                </div>
            </div>
            <div class="tab" id="analytics">
                <div style="display: block; opacity: 0; ">
                </div>
            </div>
            <div class="tab" id="reprise">
                <div style="display: block; opacity: 0; ">
                </div>
            </div>
        </div>
        <div class="component" id="inner">
            <div class="tab" id="mb3">
                <div style="display: block; opacity: 0; ">
                </div>
            </div>
            <div class="tab" id="initiative">
                <div style="display: block; opacity: 0; ">
                </div>
            </div>
            <div class="tab selected" id="um">
                <div style="display: block; opacity: 1; ">
                </div>
            </div>
    ...

JavaScript

// Mediabrands homepage Dial.
// Author: Marty Wallace <martin.wallace@airborneagency.com>, Airborne.


var urlClick = "";


var Dial = {
    
    // Constants.
    TRANSITION_TIME: 600,
    SLIDE_TIME: 2000,
    
    
    // Properties.
    clickable: false,
    urls: {
        initiative: "http://initiativemedia.com/",
        um: "http://www.weareum.com/",
        mb3: "",
        ensemble: "http://ensembleaustralia.com.au/",
        orion: "http://www.oriontradingworldwide.com/",
        cadreon: "http://www.cadreon.com.au/",
        ansible: "http://ansible.mobi/",
        magnaglobal: "http://www.magnaglobal.com/",
        airborne: "http://airborneagency.com/",
        analytics: "",
        reprise: "http://www.reprisemedia.com.au/"
    },
    
    
    // Initialize the homepage Dial.
    // JQuery is required for this document to function.
    // Must be called within $(document).ready at a minimum.
    init: function()
    {
        var that = this;
        
        // Hide Dial until beginAnimation().
        $("div#tiny div").fadeTo(0, 0);
        $("ul#sphere li").fadeTo(0, 0);
        $("div#weare").fadeTo(0, 0);
        
        // Apply rollover and click actions to each item via HTML <map>.
        $("map area.tab").each(function()
        {
            var clickId = $(this).attr("id");
            var raw = clickId.split("-");
            var id = raw[1];
            var tab = $("div#" + id);
            
            
            tab.find("div").hide();
            
            
            // Roll over.
            $(this).mouseover(function()
            {
                if(!ie)
                {
                    tab.find("div").stop().fadeTo(200, 1);
                }
                else
                {
                    tab.find("div").stop().fadeTo(0, 1);
                }
                
            
            // Roll out.
            }).mouseout(function()
            {
                if(!tab.hasClass("selected"))
          ...