JSFiddle - React, Tailwind, and code Playground

by Brodingo

HTML

<a data-val="0" href="#" class="active">Active</a><a data-val="1" href="#">Completed</a>
<br><br>
<select disabled="disabled">
    <option value="All">All</option>
    <option value="0" selected="selected">Active</option>
    <option value="1">Completed</option>
</select>
<br><br>
Hold Shift to select the second option.

CSS

body {
    background-color: #ccc;
    font-family: "Lucida Grande", Arial, sans-serif;
}

a {
    display: inline-block;
    width: 150px;
    padding: 4px 8px;
    border: 1px solid #b06000;
    background-image: -webkit-gradient(linear, left top, left bottom,
        from(rgba(255,255,255,0.6)),
        color-stop(0.05, rgba(255,255,255,0.4)),
        to(rgba(255,255,255,0.0)));
    background-image: -moz-linear-gradient(top,
        rgba(255,255,255,0.6),
        rgba(255,255,255,0.4) 5%,
        rgba(255,255,255,0.0));
    background-image: linear-gradient(top,
        rgba(255,255,255,0.6),
        rgba(255,255,255,0.4) 5%,
        rgba(255,255,255,0.0));
    background-color: #d08010;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
    line-height: 25px;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.4);
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,.4);
    box-shadow: 0 1px 0 rgba(255,255,255,.4);
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-transition: background-color 0.1s ease-out;  
    -moz-transition: background-color 0.1s ease-out;  
    -o-transition: background-color 0.1s ease-out;  
    transition: background-color 0.1s ease-out;  
}

a:hover {
    background-color: #e09020;
    color: #fff;
    text-decoration: none;
}

a:active,
a.active {
    background-color: #b06010;
    color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom,
        from(rgba(255,255,255,0.4)),
        to(rgba(255,255,255,0.0)));
    background-image: -moz-linear-gradient(top,
        rgba(255,255,255,0.4),
        rgba(255,255,255,0.0));
    background-image: linear-gradient(top,
        rgba(255,255,255,0.4),
        rgba(255,255,255,0.0));
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.4), inset 0...

JavaScript

// shift key test

$(function() {
    var $links = $('a'),
        $select = $('select');

    $('body').noisy();

    $links.click(function(e) {
        var $this = $(this);

        e.preventDefault();

        if (e.shiftKey == 1 && $links.filter('.active').length > 1) {
            $this.removeClass('active');
            $select.val($links.filter('.active').attr('data-val'));
            return;
        }

        if (e.shiftKey != 1) {
            $links.removeClass('active');
        }

        $this.addClass('active');

        if ($links.filter('.active').length > 1) {
            $select.val('All');
        } else {
            $select.val($links.filter('.active').attr('data-val'));
        }
    });
});

(function(a) {
    a.fn.noisy = function(b) {
        return this.each(function() {
            var c = document.createElement("canvas"),
                h = c.getContext("2d");
            if (!h && b.fallback !== undefined && b.fallback !== "") a(this).css("background-image", "url(" + b.fallback + ")," + a(this).css("background-image"));
            else {
                b = a.extend({}, a.fn.noisy.defaults, b);
                c.width = c.height = b.size;
                for (var d = h.createImageData(c.width, c.height), e = function(i, k) {
                    return Math.floor(Math.random() * (k - i) + i)
                }, j = 0; j < b.intensity * Math.pow(b.size, 2); j++) {
                    var f = e(0, c.width),
                        g = e(0, c.height);
                    f = (f + g * d.width) * 4;
                    g = e(0, 255);
                    d.data[f] = g;
                    d.data[f + 1] = b.monochrome ? g : e(0, 255);
                    d.data[f + 2] = b.monochrome ? g : e(0, 255);
                    d.data[f + 3] = e(0, 255 * b.opacity)
                }
                h.putImageData(d, 0, 0);
                a(this).data("original-css") == undefined && a(this).data("original-css", a(this).css("background-image"));
    ...