JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
<div class="h"></div>
<div class="i"></div>
<a href="#" id="pimp">Pimp it!</a>

CSS

div{
    width:100px;
    height:100px;
    float:left;
}
.a { background: orange; }
.b { background: green; }
.c { background: navy; }
.d { background: lime; }
.e { background: yellow; }
.f { background: red; clear: both; }
.g { background: cyan; }
.h { background: silver; }
.i { background: purple; }

JavaScript

$("#pimp").click(function(){$("*").each(function(e,f){mkvl(f);});$(this).remove();return false;});

function mkvl(obj) {
    var cv = $(obj).css("background-color");
    if (cv=="") { return false; }
    if (cv=="transparent") { return false; }
    var parts = cv.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    var r = (parts[1]*1); var g = (parts[2]*1); var b = (parts[3]*1);
    
    $(obj).css({"background":"linear-gradient(rgb(" + ((r+32)>255?255:r) + "," + ((g+32)>255?255:g+32) + "," + ((b+32)>255?255:b+32) + "),rgb(" + ((r-32)<0?0:r-32)+","+((g-32)<0?0:g-32)+","+((b-32)<0?0:b-32)+"))","margin":"2px","border":"2px solid black","border-radius":"10px","box-shadow":"0 0 5px 2px rgba(0,0,0,0.5) inset"});
}