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

* {
    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; }
}

.anim-dropdown-selectPlease--attentionGrab {
    -webkit-animation: attentionGrab 5s ease-in-out;
    color: indianred;
}

.dropdown-selectPleaseMsg {
    
}

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

.dropdown-selectPleaseMsg--active {
    display: block;
}




.is-dropdown-overlay--inactive,
.is-dropdown-list--inactive {
    display: none;
}

.is-dropdown-overlay--active,
.is-dropdown-list--active {
    display: block;
}



.dropdown-list {
    position: absolute;
    top:...

JavaScript

(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 = $dd_list.find('.dropdown-listitem--addNew'),
        $dd_addNew_input = $dd_addNew.find('input'),

    /* VARIABLES & OBJECTS */
        listitem_selected = true,


    /* FUNCTIONS */
        blaBla = function() {
            $('.dropdown-selectPlease').addClass('anim-dropdown-selectPlease--attentionGrab').on('webkitAnimationEnd animationend MSAnimationEnd OAnimationEnd', function(e) {
                $(e.target).removeClass('anim-dropdown-selectPlease--attentionGrab');
            }).on('click', function(e) {
                $(e.target).addClass('anim-dropdown-selectPlease--attentionGrab');
            });
        };

    
    /* EVENTS */

    $dd.on('click', function(e) {
        var $tg = $(e.target),
            $current_dd = $(e.currentTarget),

            $current_dd_toggle = $current_dd.find('.dropdown-toggle'),
            $current_dd_list = $current_dd.find('.dropdown-list'),
            $current_dd_addNew_input = $current_dd_list.find('.dropdown-listitem--addNew-input');

        //toggle click
        if ($tg.hasClass('dropdown-toggle')) {
            if (listitem_selected) {
                $dd_toggle.not($current_dd_toggle).addClass('is-dropdown-toggle--inactive').removeClass('is-dropdown-toggle--active');
                $dd_list.not($current_dd_list).addClass('is-dropdown-list--inactive').removeClass('is-dropdown-list--active');

                if ($tg.hasClass('is-dropdown-toggle--inactive')) {
                    $dd_overlay.addClass('is-dropdown-overlay--active').removeClass('is-dropdown-overlay--inactive');
                } else {
                   ...