JSFiddle - React, Tailwind, and code Playground

HTML

<div id="settingPanel"> Setting panel </div>
<div id="btnDropdown"> Button panel </div>

JavaScript

(function() {
    
    var defaults = { class: 'btn-group', role: 'group' };

    this.Dropdown = function (el, config, dropDownElement, content) {
        this.el = el instanceof $ ? el : $(el);
        this.dropdownElt = dropDownElement || '<div>';
        this.content = content || '';
        this.config = $.extend({}, defaults, config);
        this.createDropdown();
    };
    
    Dropdown.prototype.createDropdown = function () {
        var dropdownElement = $(this.dropdownElt, this.config).html(this.content);
        this.el.append(dropdownElement);
    };
}());

var config = {  id:'btnDropdown',
                'class': 'btn-group pull-right',
                'role':'group',
             };
//var dropdown = new Dropdown ('#settingPanel', config); 

var newConfig = {
    id:'btn-default',
    'type': 'button',
    'class':'btn btn-default dropdown-toggle',                  
    'data-toggle': 'dropdown',
    'aria-expanded':'false'
};
var content = '<span class="glyphicon glyphicon-cog"></span>';
var btnDropdown = new Dropdown ('#btnDropdown', config, '<button>', content);