JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="dropdown"> 
    <button class="dropdown-toggle is-dropdown-toggle--inactive">Info</button>
    <ul class="dropdown-list is-dropdown-list--inactive">
        <li class="dropdown-listitem is-dropdown-listitem--selected">Info</li>
        <li class="dropdown-listitem is-dropdown-listitem--unselected">Complain</li>
        <li class="dropdown-listitem is-dropdown-listitem--unselected">Misc</li>
        <li class="dropdown-listitem dropdown-listitem--addNew"><input placeholder="+Add New" /></li>
    </ul>
</div>

<div class="dropdown"> 
    <button class="dropdown-toggle is-dropdown-toggle--inactive">Info</button>
    <ul class="dropdown-list is-dropdown-list--inactive">
        <li class="dropdown-listitem is-dropdown-listitem--selected">Info</li>
        <li class="dropdown-listitem is-dropdown-listitem--unselected">Complain</li>
        <li class="dropdown-listitem is-dropdown-listitem--unselected">Misc</li>
        <li class="dropdown-listitem dropdown-listitem--addNew"><input type="text" placeholder="+Add New" /></li>
    </ul>
</div>

CSS

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

body {
    background-color: #f2f2f2;
    font: 300 14px "HelveticaNeue-Light", "Helvetica Neue Light",
             "Helvetica Neue", sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-fonts-smoothing: antialiased;
}

button, input[type="button"], input[type="submit"] { cursor: pointer; font: inherit;}
button { line-height: normal; -webkit-appearance: none; margin: 0;}
button::-moz-focus-inner { border: 0; padding: 0; }

input, textarea { outline: none; }

::-webkit-input-placeholder {
    font: inherit; 
     color: inherit;
}

:-moz-placeholder {
    font: inherit;    
    color: inherit;  
}

.dropdown-overlay {
    position: fixed;
    top: 0; bottom: 0;
    left: 0; right: 0;
    z-index: 1;
}

.dropdown {
    float: left;
    position: relative;
    z-index: 2;
    width: 50%;
    cursor: pointer;
}

.dropdown-toggle,
.dropdown-listitem,
.dropdown-listitem--addNew input {
   padding: 6px 6px 6px 12px;
}

.dropdown-toggle {
    position: relative;
    width: 100%;
    border: 1px solid rgb(218, 218, 218);
    box-shadow: inset -1px -1px 3px rgba(0,0,0,0.1), inset 1px 1px 3px rgba(0,0,0,0.06);
    background: #fff;
    color: #333;
    text-align: left;
}

.is-dropdown-toggle--inactive {
    background: #fff;
}

.is-dropdown-toggle--active {
    background: #f1f1f1;
}

@-webkit-keyframes attentionGrab {
    0%   { color: #333; }
    5%   { color: indianred; }
    95%  { color: indianred; }
    100% { color: #333; }
}

@-moz-keyframes attentionGrab {
    0%   { color: #333; }
    5%   { color: indianred; }
    95%  { color: indianred; }
    100% { color: #333; }
}

.anim-dropdown-selectPleaseMsg--attentionGrab {
    -moz-animation: attentionGrab 2.2s ease-in-out;
    -webkit-animation: attentionGrab 2.2s ease-in-out;
    color: indianred;
}

.dropdown-selectPleaseMsg {
    
}

.dropdown-selectPleaseMsg--inactive {
    display: none;
}

.dropdown-selectPleaseMsg--active {
   ...

JavaScript

(function ($) {
    $.fn.switchClass = function (x, y) {
        return this.removeClass(x).addClass(y);
    }

    $.fn.activate =  function () {
        var target_class_substr = (this.attr('class').match("([^ ]+)--[in]*active"))[1] ;
         return this.addClass(target_class_substr + '--active').removeClass(target_class_substr + '--inactive');
    }

    $.fn.deactivate =  function () {
        var target_class_substr = (this.attr('class').match("([^ ]+)--[in]*active"))[1] ;
         return this.addClass(target_class_substr + '--inactive').removeClass(target_class_substr + '--active');
    }
})(jQuery);




(function($) {

    /* DOM OBJECTS */
    var $dd = $('.dropdown'),
        $dd_overlay = $('<div/>').addClass('dropdown-overlay is-dropdown-overlay--inactive').prependTo('body'),
        $dd_toggle = $dd.find('.dropdown-toggle'),
        $dd_list = $dd.find('.dropdown-list'),
        $dd_addNew_input = $dd_list.find('.dropdown-listitem--addNew').find('input'),

        /* VARIABLES & OBJECTS */
        listitem_selected = true,

        closeDropdown = function () {
            $dd_addNew_input.val('');
            $dd_overlay.deactivate();
            $dd_list.deactivate();
            $dd_toggle.deactivate();
        };


    /* EVENTS */
    $dd_toggle.on('click', function(e) {
        var $tg = $(e.target),
            $curr_dd_toggle = $(e.currentTarget),
            $curr_dd_selectPleaseMsg, $curr_dd = $curr_dd_toggle.closest($dd),
            $curr_dd_list = $curr_dd.find($dd_list),
            $curr_dd_addNew_input;

        if (listitem_selected) {
            $curr_dd_addNew_input = $curr_dd_list.find($dd_addNew_input);

            $dd_toggle.not($curr_dd_toggle).deactivate();
            $dd_list.not($curr_dd_list).deactivate();

            $dd_overlay.activate();
            $curr_dd_list.toggleClass('is-dropdown-list--inactive').toggleClass('is-dropdown-list--active');
           ...