JSFiddle - React, Tailwind, and code Playground

by anilkamath87

HTML

<ul>
    <li class="tab-dropdown">
        <a href="#">Major section</a>
        <ul>
            <li><a href="#">First Subsection</a></li>
            <li><a href="#">Second Subsection</a></li>
        </ul>
    </li>
    <li class="current tab-dropdown">
        <a href="#">Current tab</a>
        <ul>
            <li class="current"><a href="#">Current Subsection</a></li>
            <li><a href="#">Another Subsection</a></li>
        </ul>
    </li>
    <li><a href="#">QC</a></li>
    <li><a href="#">Tabs grow wider to accommodate long captions</a></li>
</ul>

JavaScript

/*
*   JQuery.TabDropdown
*
*   Author: Rui Jiang ([email protected])
*   Purpose: A different take on the standard Javelin tab navigation item. 
*            Wires up any list item with "tab-dropdown" as a class to be
*            the hit target for triggering the submenu. There is a specific
*            set of DOM elements which need to be specified for the plugin
*            to function.
*
*   -----------------------------------------------------------------------------------------------
*
*   Configuration Options:
*   (None)
*
*   Properties:
*   (None)
*
*   Methods:
*   (None)
* 
*   -----------------------------------------------------------------------------------------------
*
*   Usage:
*
*   HTML:
*  
*
*   Javascript:
*   $(function() {
*       $().tabdropdown();
*   });
*
*/

(function($) {
    $.fn.extend({
        tabdropdown: function(options) {
            // Region: Constructing Plugin
            var defaults = {};

            // Region: Setup

            var dropdownTab = $("li.tab-dropdown");
            var dropdownTablink = $("li.tab-dropdown").children("a");
            var dropdownMenu = dropdownTab.find("ul");

            // apply styles
            dropdownTab.each(function(index) {
                if (!$(this).hasClass("current") && (!$.browser.msie)) {
                    $(this).css("border-bottom", 0);
                }

                if (!$(this).hasClass("current")) {
                    $(this).find("ul").addClass("unselected");
                }
            });

            dropdownTablink.addClass("dropdown");

            dropdownMenu.find("li:first").addClass("first");
            dropdownMenu.find("li:last").addClass("last");

            dropdownMenu.css("display", "none");
            dropdownMenu.each(function(index) {
                var menu = $(this);

                var position = menu.closest("li.tab-dropdown").position();
                menu.css("left", position.left);

                if...