JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css">
<h1>Badge Maker 3000</h1>

<p id="badges">
    <a href="#" class="badge tag" title="Bronze Badge"><span class="bronze"></span> css</a>
    <a href="#" class="badge tag" title="Silver Badge"><span class="silver"></span> jquery</a>
    <a href="#" class="badge tag" title="Gold Badge"><span class="gold"></span> html</a>
    
    
    <a href="#" class="badge" title="Bronze Badge"><span class="bronze"></span> mortarboard</a>
    <a href="#" class="badge" title="Silver Badge"><span class="silver"></span> enlightened</a>
    <a href="#" class="badge" title="Gold Badge"><span class="gold"></span> legendary</a>
</p>

<form id="make">
    <h2>Make your own badge!</h2>
    <label for="name" id="name-label">Badge name: </label>
    <input type="text" id="name" />
    <input type="checkbox" id="tag" /><label for="tag">Tag Badge</label>
    <div class="buttonset">
        <input type="radio" name="color" id="bronze" checked="checked" value="Bronze" /><label for="bronze">Bronze</label>
        <input type="radio" name="color" id="silver" value="Silver" /><label for="silver">Silver</label>
        <input type="radio" name="color" id="gold" value="Gold" /><label for="gold">Gold</label> 
    </div>
    <button id="go">Go!</button>
</form>

CSS

a {
    text-decoration: none;
}

h1 {
    font-family: Georgia, serif;
    font-size: 24px;
    margin-bottom: 15px;
    border-bottom: 1px solid #999;
    padding-bottom: 3px;
}

#make {
    font-family: Arial;
    padding: 10px 20px 20px;
    border: 1px solid #ccc;
    position: fixed;
    bottom: 0;
    font-size: 12px;
    background-color: #f9f9f9;
}

#make h2 {
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #999;
    padding-bottom: 3px;
    margin-bottom: 10px;
}

#make .ui-button-text {
    font-size: 10px;
    padding: 0.2em 0.6em 0.35em;
    font-weight: bold;
}

#make #name {
    border: 1px solid #999;
    padding: 2px 4px 3px;
}

#make .buttonset {
    display: inline-block;
}

/* All the CSS ya need below! */
.badge {
    display: inline-block;
    color: #fff;
    font-size: 12px;
    font-family: Arial, sans-serif;
    border: 2px solid #333;
    background-color: #333;
    padding: 2px 8px 4px;
    margin: 3px 3px 0 0;
    
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.badge:hover {
    background-color: #555;
    border-color: #555;
}

.badge.tag {
    background-color: #eee;
    color: #333;
}

.badge.tag:hover {
    background-color: #555;
    color: #fff;
}

.badge span {
    display: inline-block;
    width: 6px;
    height: 6px;
    vertical-align: middle;
    margin-right: 2px;
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.badge .bronze {
    background-color: #C99660;
}

.badge .silver {
    background-color: #C3C3C3;
}

.badge .gold {
    background-color: #FDCC02;
}

JavaScript

$('#tag, #go').button();
$('.buttonset').buttonset();

$('#go').click(function() {
    var checked = $('.buttonset :checked');

    var badge = $('<a />').attr({
        'href': '#',
        'title': checked.val() + ' Badge'
    }).addClass('badge').text($('#name').val())
        .appendTo('#badges').hide().fadeIn(300);

    if ($('#tag').is(':checked')) badge.addClass('tag');

    $('<span />').addClass(checked.attr('id')).prependTo(badge);
    
    return false;
});