JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://alanhogan.com/files/perm/noisy.js"></script>
<div class="demo a">
   A
</div>
<div class="demo b">
   B
</div>
<div class="demo c">
   C
</div>
<div class="demo d">
   D
</div>

<div class="demo e">
   E
</div>
<div class="demo f">
   F
</div>
<div class="demo g">
   G
</div>
<div class="demo h">
   H
</div>

CSS

body {
    font-family: "Helvetica Neue", Arial, Helvetic, sans-serif;
}
.demo {
    float: left;
    margin: 10px;
    padding: 10px;
    width: 80px;
    height: 80px;
    color: white;
}
.a, .e, .g {
    background: #888;
}
.c {
    background: #fff;
}
.f, .d {
    background: #f60;
}

.b, .h {
    background: #5ef;
}

JavaScript

// Default:
$('.demo.a, .demo.b').noisy();

// Customize:
$('.demo.c').noisy({
    opacity: 0.4
});
$('.demo.d').noisy({
    opacity: 0.5,
    amount: 10 // darker
});

$('.demo.e').noisy({
    opacity: 0.6
});

/* Note there currently is a bug where 
 if you do this, all three elements get 'tinted' orange
$('.demo.f, .demo.g, .demo.h').noisy({
    opacity: 0.4,
    monochromatic: true
});
*/

/* The workaround is to do them separately. A fix should be easy, but I need to sleep tonight! */
$('.demo.f').noisy({
    opacity: 0.4,
    monochromatic: true
});
$('.demo.g').noisy({
    opacity: 0.4,
    monochromatic: true
});
$('.demo.h').noisy({
    opacity: 0.4,
    monochromatic: true
});