JSFiddle - React, Tailwind, and code Playground

by josh3736

HTML

<link rel="stylesheet" href="http://github.com/lafeber/world-flags-sprite/raw/master/stylesheets/flags16.css">
<div id="country-select">
  <form action="server-side-script.php">
    <select id="country-options" name="country-options">
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option...

CSS

* { margin: 0; padding: 0; }

body {
    background: #ccc;
    }

header {
    display: block;
    background: #777;
    height: 50px;
    position: relative;
    min-width: 600px;
    }
    
    header h1 {
        font: bold 24px Arial, Helvetica, sans-serif;
        color: #fff;
        position: absolute;
        left: 20px;
        top: 8px;
        }

#country-select {
    position: absolute;
    top: 13px;
    right: 0;
    width: 180px;
    }

/* rought form styles for when JS is disabled */

#country-select form {
    width: 180px;
    padding: 0;
    }

#country-select select,
#country-select input {
    display: inline;
    padding: 0;
    margin: 0;
    }
    
/* JS-created definition list */

.dropdown dd { position: relative; }

.dropdown ul { max-height:350px; overflow-y:auto; overflow-x:hidden; }

.dropdown a {
    text-decoration: none;
    outline: 0;
    font: 12px Arial, Helvetica, sans-serif;
    display: block;
    width: 130px;
    overflow: hidden;
    white-space:nowrap;
    }

.dropdown dt a {
    background: #c45618;
    border: 1px solid #964315;
    padding: 3px 10px 4px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    }

    .dropdown dt a.active {
        background: #db5e18;
        -webkit-border-bottom-left-radius: 0;
        -webkit-border-bottom-right-radius: 0;
        -moz-border-radius-bottomleft: 0;
        -moz-border-radius-bottomright: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom: 1px dotted #676768;
        -moz-box-shadow: 0 3px 7px rgba(0,0,0,.5);
        -webkit-box-shadow: 0 3px 7px rgba(0,0,0,.5);
        box-shadow: 0 3px 7px rgba(0,0,0,.5);
        color: #fff;
        }

.dropdown dd ul {
    background: #814f33;
    border: 1px solid #676768;
    color: #C5C0B0;
    display: none;
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    padding: 2px 0 5px 0;
    list-style:...

JavaScript

$(document).ready(function() {

    // --- language dropdown --- //

    // turn select into dl
    createDropDown();
    
    var $dropTrigger = $(".dropdown dt a");
    var $languageList = $(".dropdown dd ul");
    
    // open and close list when button is clicked
    $dropTrigger.toggle(function() {
        $languageList.slideDown(200);
        $dropTrigger.addClass("active");
    }, function() {
        $languageList.slideUp(200);
        $(this).removeAttr("class");
    });

    // close list when anywhere else on the screen is clicked
    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("dropdown"))
            $languageList.slideUp(200);
            $dropTrigger.removeAttr("class");
    });

    // when a language is clicked, make the selection and then hide the list
    $(".dropdown dd ul li a").click(function() {
        var clickedValue = $(this).parent().attr("class");
        var clickedTitle = $(this).find("em").html();
        $("#target dt").removeClass().addClass(clickedValue);
        $("#target dt em").html(clickedTitle);
        $languageList.hide();
        $dropTrigger.removeAttr("class");
    });
});

    // actual function to transform select to definition list
    function createDropDown(){
        var $form = $("div#country-select form");
        $form.hide();
        var source = $("#country-options");
        source.removeAttr("autocomplete");
        var selected = source.find("option:selected");
        var options = $("option", source);
        $("#country-select").append('<dl id="target" class="dropdown f16"></dl>')
        $("#target").append('<dt><a href="#"><em class="flag ' + selected.val().toLowerCase() + '">' + selected.text() + '</em></a></dt>');
        $("#target").append('<dd><ul></ul></dd>');
        var $drop = $("#target dd ul");
        options.each(function(){
            $drop.append('<li><a href="' + $(this).attr("title") + '"><em class="flag ' +...