JSFiddle - React, Tailwind, and code Playground

by gedave

HTML

<script src="https://getfirebug.com/firebug-lite.js"></script>
<div  class="dv-layout-cell dv-sidebar1">
  <div class="dv-vmenublock clearfix">
    <div class="dv-vmenublockheader">
      <h3 class="t">Test Menu</h3>
    </div>
    <div id="vMenu" class="dv-vmenublockcontent" >
      <ul class="dv-vmenu">
        <li><a class="active">Parent 1</a>
          <ul class="active">
            <li id="Child-1"><a>Child 1</a></li>
            <li id="Child-2"><a>Child 2</a></li>
            <li id="Child-3"><a>Child 3</a></li>
            <li id="Child-4"><a>Child 4</a></li>
            <li id="Child-5"><a>Child 5</a></li>
            <li id="Child-6"><a>Child 6</a></li>
          </ul>
        </li>
        <li><a class="active">Parent 2</a>
          <ul>
            <li id="Child-7"><a>Child 7</a></li>
          </ul>
        </li>
        <li><a class="active">Parent 3</a>
          <ul>
            <li id="Child-8"><a>Child 8</a></li>
            <li id="Child-9"><a>Child 9</a></li>
            <li id="Child-10"><a>Child 10</a></li>
            <li id="Child-11"><a>Child 11</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

CSS

/* Created by Artisteer v4.1.0.59861 */

#dv-main
{
   background: #FFFFFF;
   margin:0 auto;
   font-size: 13px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: normal;
   font-style: normal;
   position: relative;
   width: 100%;
   min-height: 100%;
   left: 0;
   top: 0;
   cursor:default;
   overflow:hidden;
}

.dv-layout-cell
{
   display: table-cell;
   vertical-align: top;
}
.dv-vmenublock
{
   border:1px solid transparent;
   margin:3px;
}
div.dv-vmenublock img
{
   margin: 0;
}

.dv-vmenublockheader
{
   padding:10px 0;
   margin:0 auto;
}
.dv-vmenublockheader .t,
.dv-vmenublockheader .t a,
.dv-vmenublockheader .t a:link,
.dv-vmenublockheader .t a:visited, 
.dv-vmenublockheader .t a:hover
{
   color: #FA6114;
   font-size: 20px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: normal;
   font-style: normal;
   margin: 0 10px;
}

.dv-vmenublockheader .t:before
{
   content:url('../m_images/vmenublockheadericon.png');
   margin-right:6px;
   bottom: 3px;
   position:relative;
   display:inline-block;
   vertical-align:middle;
   font-size:0;
   line-height:0;
}

.dv-vmenublockcontent
{
   background: #EFF2F5;
   border:1px solid #9CAFC4;
   margin:0 auto;
}

ul.dv-vmenu, ul.dv-vmenu ul
{
   list-style: none;
   display: block;
}

ul.dv-vmenu, ul.dv-vmenu li
{
   display: block;
   margin: 0;
   padding: 0;
   width: auto;
   line-height: 0;
}

ul.dv-vmenu
{
   margin-top: 0;
   margin-bottom: 0;
   position: relative;
}

ul.dv-vmenu>li>a
{
   padding:0 15px;
   margin:0 auto;
   color: #5C7999;
   min-height: 30px;
   line-height: 30px;
}
ul.dv-vmenu a 
{
   display: block;
   cursor: pointer;
   z-index: 1;
   font-size: 13px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   position:relative;
}

ul.dv-vmenu ul, ul.dv-vmenu li{
   position:relative;
}

ul.dv-vmenu>li
{
   margin-top:...

JavaScript

(function ($) {
    'use strict';
    var data = [
        { str: navigator.userAgent, sub: 'Chrome', ver: 'Chrome', name: 'chrome' },
        { str: navigator.vendor, sub: 'Apple', ver: 'Version', name: 'safari' },
        { prop: window.opera, ver: 'Opera', name: 'opera' },
        { str: navigator.userAgent, sub: 'Firefox', ver: 'Firefox', name: 'firefox' },
        { str: navigator.userAgent, sub: 'MSIE', ver: 'MSIE', name: 'ie' }
    ];
    var v = function (s, n) {
        var i = s.indexOf(data[n].ver);
        return (i !== -1) ? parseInt(s.substring(i + data[n].ver.length + 1), 10) : '';
    };
    var html = $('html');
    for (var n = 0; n < data.length; n++) {
        if ((data[n].str && (data[n].str.indexOf(data[n].sub) !== -1)) || data[n].prop) {
            html.addClass(data[n].name + ' ' + data[n].name + v(navigator.userAgent, n) || v(navigator.appVersion, n));
            break;
        }
    }

    // 'desktop' class is used as responsive design initial value
    html.addClass('desktop');
})(jQuery);