JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->

    </head>
    <body>
        <script type="text/javascript">
            var input = {
                "shallow": ["one", "two", "three"],
                "deep" : ["one", ["two", ["three"]]],
                "crossroads": {"one": ["four"], "two": ["five"], "three": ["six"]},
                "mixed": [{"one": ["four"], "two": ["five"], "three": ["six"]},["one", "two", "three"]],
                "multideep": ["one", "two", "three", ["one", "two", "three"]],
                "multicross": [{"one": ["four"], "two": ["five"], "three": ["six"]}, {"one": ["four"], "two": ["five"], "three": ["six"]}] // truly invalid conf
            };

            var temp = {};

            function head(arr){
                return arr.filter(function(elm){
                    return Object.prototype.toString.call(elm) === "[object Object]" || Object.prototype.toString.call(elm) === "[object String]";
                });
            }

            function rest(arr){
                return arr.filter(function(elm, i){
                    return Object.prototype.toString.call(elm) === "[object Array]";
                });
            }

            function parse(el){
                if (Array.isArray(el)){
                    return rest(el).length ?  ['more', head(el)] : ['and', head(el)];
                } else if (typeof el === 'object'){
                    return ['or', Object.keys(el)];
                } else {
                    throw Error("not matching");
                }

            }
            function mapRoute(arr, route) {
                var...