JSFiddle - React, Tailwind, and code Playground

by yijiang

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css">
<form action="somewhere.aspx" method="post" id="flair">
    <ul><li>
        <label for="ddlSites">Select a site:</label>
        <select name="ddlSites" id="ddlSites">
            <option>Stack Overflow</option>
            <option>Server Fault</option>
            <option>Meta Stack Overflow</option>
            <option>Super User</option>
            <option>Stack Apps</option>
            <option>Web Applications</option>
            <option>Gaming</option>
            <option>Webmasters</option>
            <option>Cooking</option>
            <option>Game Developers</option>
            <option>Photography</option>
            <option>Statistical Analysis</option>
            <option>Mathematics</option>
            <option>Home Improvement</option>
            <option>GIS</option>
            <option>TeX - LaTeX</option>
            <option>Ubuntu</option>
            <option>Personal Finance and Money</option>
            <option>English Language and Usage</option>
            <option>User Interface</option>
            <option>Unix and Linux</option>
            <option>WordPress</option>
            <option>Theoretical Computer Science</option>
            <option>Apple</option>
            <option>Role-playing Games</option>
            <option>Bicycles</option>
            <option>Programmers</option>
            <option>Android Enthusiasts</option>
            <option>OnStartups</option>
            <option>Electronics and Robotics</option>
        </select>
        </li>
        <li>
            <label for="txtUserID">Numeric User ID</label>
            <input name="txtUserID" id="txtUserID" type="text" /> 
        </li>
        <li>
            <label for="cbGlobal">Global Flair</label>
            <input id="cbGlobal" name="cbGlobal" checked="checked" type="checkbox" /> 
        </li><li>
        <label for="cbBeta">Exclude beta SE...

CSS

body {
    font-family: Arial, sans-serif;
    font-size: 13px;
}

#flair {
    margin: 10px 0;
    width: 400px;
    border: 5px solid #ccc;
    padding: 12px 0 25px;
    margin: 0 auto;
    
    -moz-border-radius: 10px;
    
    -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.6);
}

#flair > ul > li {
    padding: 6px 10px;
}

#flair > ul > li:hover {
    background-color: #f3f3f3;
}

#flair > ul > li > label {
    width: 150px;
    display: inline-block;
    text-align: right;
    margin-right: 4px;
    color: #666;
}

#flair > ul > li:hover > label {
    color: #333;
}

.buttonset {
    display: inline-block;
}

.ui-button {
    font-size: 11px;
}

input[type='text'] {
    font-size: 13px;
    border: 1px solid #ccc;
    padding: 3px 4px;
    margin-left: 3px;
    
    -moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.2);
}

input[type='text']:hover, input[type='text']:focus {
    border-color: #999;
}

input[type='checkbox'] {
    vertical-align: bottom;
}

select {
    padding: 2px 4px;
    vertical-align: middle;
}

h3 {
    padding: 5px 0;
    text-align: center;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    color: #999;
}

li:hover h3 {
    color: #333;
}

#ddlThemes {
    overflow: hidden;
    padding: 5px 0;
}

#ddlThemes li {
    float: left;
    width: 49%;
    text-align: center;
    border: 1px solid transparent;
    margin: 4px 0;
    opacity: 0.7;
}

#ddlThemes li label {
    display: block;
    padding: 4px 0;
    cursor: pointer;
}

#ddlThemes li strong {
    display: block;
}

#ddlThemes li:hover, #ddlThemes li.selected {
    border-color: #999;
    opacity: 1;
}

#ddlThemes li.selected {
    background-color: #ccc;
}

#ddlThemes li input {
    position: absolute;
    left: -9999px;
}

#btnSubmit {
    width: 130px;
    margin: 20px auto 5px;
    display: block;
    font-size: 14px;
}

.ui-button .ui-button-text {
    padding: 0.3em 1em 0.45em;
}

.ui-autocomplete {
    font-size: 11px;
}

.ui-menu .ui-menu-item a {
    padding:...

JavaScript

var icons = {
    "Stack Overflow": "stackoverflow",
    "Server Fault": "serverfault",
    "Meta Stack Overflow": "stackoverflowmeta",
    "Super User": "superuser",
    "Stack Apps": "stackapps",
    "Web Applications": "webapps",
    "Gaming": "gaming",
    "Webmasters": "webmasters",
    "Cooking": "cooking",
    "Game Developers": "gamedev",
    "Photography": "photo",
    "Statistical Analysis": "stats",
    "Mathematics": "math",
    "Home Improvement": "diy",
    "GIS": "gis",
    "TeX - LaTeX": "tex",
    "Ubuntu": "ubuntu",
    "Personal Finance and Money": "money",
    "English Language and Usage": "english",
    "User Interface": "ui",
    "Unix and Linux": "unix",
    "WordPress": "wordpress",
    "Theoretical Computer Science": "cstheory",
    "Apple": "apple",
    "Role-playing Games": "rpg",
    "Bicycles": "bicycles",
    "Programmers": "programmers",
    "Android Enthusiasts": "android",
    "OnStartups": "onstartups",
    "Electronics and Robotics": "electronics"
};

$('.buttonset').buttonset();
$(':submit').button();

var options = [];
var siteList = $('#ddlSites');

siteList.children('option').each(function(i) {
    options.push($(this).text());
});

$('<input id="ddlSites" name="ddlSites" type="text" />').replaceAll(siteList).autocomplete({
    source: function(request, response) {
        var test = new RegExp('\\b' + $.trim(request.term), 'i');
        var current = [];

        for (var i = 0; i < options.length; i++) {
            if (options[i].match(test)) {
                current.push(options[i]);
            }
        }

        response(current);
    },
    focus: function(event, ui) {
        console.log(event);
        console.log(ui);
        $(this).val(ui.item.label);
        return false;
    },
    select: function(event, ui) {
        console.log(event);
        console.log(ui);
        $(this).val(ui.item.label);
        return false;
    }
}).data("autocomplete")._renderItem = function(ul, item) {
    var list = $('<li...