JSFiddle - React, Tailwind, and code Playground

by Rob Crowther

HTML

<div>What color am I?</div>
<div>What color am I?</div>
<div>What color am I?</div>
<div>What color am I?</div>
<div>What color am I?</div>

CSS

div { color: #fff; padding: 1em; margin: 1em; background-color: #f00; }

div:nth-child(1) {
    background: url(data:image/gif;base64,R0lGODlhLAAsALMAAAROpAROogNOpANOowNOogJOpAROowJOowJNowFNpgFNpQFNpAFNowJNpQJNpABNoyH5BAQUAP8ALAAAAAAsACwAAASP8MlJq7046827/2AojqTInGiqrmyLHXAsz3RtY0Ou73zv/62fcCi0EY/IGnLJbDqf0Kh0Sq1ar9iBYcvter/gsHhMLpvP6LR6zW673+SAfC4H0+nhu15P6BN8foF/gIKDO3SBhIU/hYY6iH6KgoyLPI2OOpeUk1mdnp+goaKjpFZwp6ipqqusra6vsLGybBEAOw%3D%3D);
}
div:nth-child(2) {
    background: 
-moz-linear-gradient(top, #FFFAAD 0%, #FFF47D 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFAAD), color-stop(100%,#FFF47D)); /* webkit */
    background: -o-linear-gradient(top, #FFFAAD 0%, #FFF47D 100%);
    background: linear-gradient(top, #FFFAAD 0%, #FFF47D 100%);
}
div:nth-child(3) {
    background: 
 -moz-linear-gradient(top, #FFFAAD 0%, #FFF47D 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFAAD), color-stop(100%,#FFF47D)); /* webkit */
    background: -o-linear-gradient(top, #FFFAAD 0%, #FFF47D 100%);
    background: linear-gradient(top, #FFFAAD 0%, #FFF47D 100%);
    background: url(data:image/gif;base64,R0lGODlhLAAsALMAAAROpAROogNOpANOowNOogJOpAROowJOowJNowFNpgFNpQFNpAFNowJNpQJNpABNoyH5BAQUAP8ALAAAAAAsACwAAASP8MlJq7046827/2AojqTInGiqrmyLHXAsz3RtY0Ou73zv/62fcCi0EY/IGnLJbDqf0Kh0Sq1ar9iBYcvter/gsHhMLpvP6LR6zW673+SAfC4H0+nhu15P6BN8foF/gIKDO3SBhIU/hYY6iH6KgoyLPI2OOpeUk1mdnp+goaKjpFZwp6ipqqusra6vsLGybBEAOw%3D%3D);
}
div:nth-child(4) {
     background: url(data:image/gif;base64,R0lGODlhLAAsALMAAAROpAROogNOpANOowNOogJOpAROowJOowJNowFNpgFNpQFNpAFNowJNpQJNpABNoyH5BAQUAP8ALAAAAAAsACwAAASP8MlJq7046827/2AojqTInGiqrmyLHXAsz3RtY0Ou73zv/62fcCi0EY/IGnLJbDqf0Kh0Sq1ar9iBYcvter/gsHhMLpvP6LR6zW673+SAfC4H0+nhu15P6BN8foF/gIKDO3SBhIU/hYY6iH6KgoyLPI2OOpeUk1mdnp+goaKjpFZwp6ipqqusra6vsLGybBEAOw%3D%3D);
    background: 
 -moz-linear-gradient(top, #FFFAAD 0%, #FFF47D 100%); /* firefox */
   ...

JavaScript

$("div").bind("click", function() {
    window.alert('Background color: ' + ($(this).css('background-color')));
    var re = /(#([0-9A-Fa-f]{3,6})\b)|(aqua)|(black)|(blue)|(fuchsia)|(gray)|(green)|(lime)|(maroon)|(navy)|(olive)|(orange)|(purple)|(red)|(silver)|(teal)|(white)|(yellow)|(rgb\(\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*,\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*,\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*\))|(rgb\(\s*(\d?\d%|100%)+\s*,\s*(\d?\d%|100%)+\s*,\s*(\d?\d%|100%)+\s*\))/g;
    var colors = ($(this).css('background-image')).match(re);
    for (var i=0; i < colors.length; i++) {
        window.alert('Gradient colour: ' + colors[i]);
    }
});