JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://vadikom.github.io/smartmenus/src/jquery.smartmenus.js"></script>
<link rel="stylesheet" href="http://vadikom.github.io/smartmenus/src/css/sm-core-css.css">
<link rel="stylesheet" href="http://vadikom.github.io/smartmenus/src/css/sm-blue/sm-blue.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.min.css">
        <ul id="main-menu" class="sm sm-blue">
            <li><a href="#">Home</a></li>
            <li><a href="#/">About</a>
            <ul>
              <li><a href="#">Introduction to SmartMenus jQuery</a></li>
              <li><a href="#">Themes</a></li>
              <li><a href="#">The author</a></li>
              <li><a href="#">The company</a>
                <ul>
                  <li><a href="#">About Vadikom</a></li>
                  <li><a href="#">Projects</a></li>
                  <li><a href="#">Services</a></li>
                  <li><a href="#">Privacy policy</a></li>
                </ul>
              </li>
              <li><a href="#">Old SmartMenus versions</a></li>
            </ul>
          </li>
          <li><a href="#">Mega menu</a>
              <ul class="mega-menu"> <!-- got the class -->
                <li>
                  <!-- The mega drop down contents -->
        <ul class="small-block-grid-1 large-block-grid-3">
            <li><img class="th" src="http://placehold.it/350x150" /></li>
            <li><img class="th" src="http://placehold.it/350x150" /></li>
            <li><img class="th" src="http://placehold.it/350x150g" /></li>
        </ul>
                    <!-- End mega content -->
                </li>
              </ul>
            </li>

          </ul>

JavaScript

$(function() {
		$('#main-menu').smartmenus({
			subMenusSubOffsetX: 1,
			subMenusSubOffsetY: -8
		});
	});