JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.min.js"></script>
<ul id="menu">
    <li>
        <a href="javascript:void(0)">
            Holm Marcher
        </a><ul id="submenu"></ul>
    </li>
</ul>
            
<script id="menu-item-template" type="text/x-handlebars-template">
    {{#each this}}
            <li class="list-{{@index}}">
                {{#each this}}
                    <dl style="background-color: {{color}}; margin-left: {{pushEm}}em; z-index: {{math 100 '-' @index}}">
                        <dt>{{position}}</dt>
                        <dd>
                            {{employer}}
                        </dd>
                    </dl>
                {{/each}}
            </li>
    {{/each}}
</script>

SCSS

body {
    font-family: Arial;
}

#menu {
    padding: 0;
    margin: 0;
    margin-top: 400px;
    
    ul {
        margin: 0;
        padding: 0;
        
        li {
            list-style-type: none;
            margin: 0;
        }
        
    }
    
    & > li {
        a {
            display: inline-block;
            background: #000;
            color: #fff;
            text-transform: uppercase;
            padding: 2em;
            vertical-align: top;
            height: 2em;
            line-height: 2em;
            z-index: 200;
            position: relative;
        }
        
        #submenu {
            display: inline-block;
            vertical-align: top;
            
            dl {
                height: 2em;
                text-align: center;
                margin: 0;
                position: relative;
                
                dt {
                    opacity: 0.4;
                    font-size: 0.6em;
                    font-weight: bold;
                    letter-spacing: 0.15em;
                    padding-bottom: 0.5em;
                }
                
                dd {
                    padding: 0;
                    margin: 0;
                    font-size: 0.9em;
                    font-weight: bold;                    
                    letter-spacing: 0.1em;
                }
            }
        }
    }
    
    #submenu {
        position: relative;
        width: 70%;

        li {
            position: absolute;
            width: 200%;
            height: 6em;
            margin-left: -5em; /* offset fra logo */
            
            &.list-0 {
                margin-left: 0;
            }

            &.list-1 {
                top: -6em;   
            }    

            &.list-2 {
                bottom: -12em;                
            }  

            &.list-3 {
                top: -12em;              
            }    

            &.list-4 {
                bottom: -18em;       
 ...

JavaScript

var positions = [
    {
        position: "Danish speaking account manager",
        employer: "Mærsk"
    },
    {
        position: "Responsive web designer",
        employer: "Momondo"
    },
    {
        position: "Senior creative story manager",
        employer: "Lego"
    },
    {
        position: "Lead UX architect",
        employer: "Momondo"
    },
    {
        position: "Senior digital designer",        
        employer: "Momondo"
    },
    {
        position: "Project manager",        
        employer: "J. Walter Thompson CPH"
    },
    {
        position: "Sales Executive",        
        employer: "Sas Institute"
    },
    {
        position: "Senior commercial manager",        
        employer: "Keybroker"
    },
    {
        position: "Costumer experience director",        
        employer: "Dis/play"
    },
    {
        position: "Sales Engineer",        
        employer: "Sizmek Copenhagen"
    },
    {
        position: "Chief of digital marketing optimization",        
        employer: "Berlingske Media"
    },
    {
        position: "Sales Engineer",        
        employer: "Sizmek Copenhagen"
    },
    {
        position: "Chief of digital marketing optimization",        
        employer: "Berlingske Media"
    }
];

Handlebars.registerHelper("math", function(lvalue, operator, rvalue, options) {
    lvalue = parseFloat(lvalue);
    rvalue = parseFloat(rvalue);
        
    return {
        "+": lvalue + rvalue,
        "-": lvalue - rvalue,
        "*": lvalue * rvalue,
        "/": lvalue / rvalue,
        "%": lvalue % rvalue
    }[operator];
});

$(function() {
    var source = $("#menu-item-template").html();
    var template = Handlebars.compile(source);
    
    var positionRemap = [];
    var countPerRow = 2;
    var _currentRowItemCount = 0;
    var _rowCount = 0;
    
    var colorSchemes = [
        ["#3e5265", "#041323"],        
        ["#26333f", "#97a9bb"]
    ];
    
    var _currentColorSchemeIndex = 0;...