JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <style type="text/css">

    .thumb {
        width:200px; 
        height:100px;    
        overflow: auto;
        float: left;
        margin: 2px;
    }

    .circleDiv {
        width:28px; 
        height: 28px; 
        background-color: white; 
        border-radius: 14px;    
        margin: 0 auto;
        top: 35px;
        position: relative;
    }

    .favicon {
        margin-left: 6px; 
        margin-top: 6px;    
    }

    .content {
        margin: 0 auto;
        width: 612px;
    }

    </style>
</head>
<body>

<div class="content">
    <div class="thumb">
        <div class="circleDiv">
            <!-- Ycombinator -->
            <img class="favicon"  id="favicon-8" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAElBMVEX/ZgD////2ii35sXP/48r4oVep4xaPAAAAAWJLR0QB/wIt3gAAAAlwSFlzAAAASAAAAEgARslrPgAAADBJREFUCNdjYMAHBBUYBMEMQwNmYTCD0YFFAMxgFTYMgChyFIGqNhSGMhgFCDNwAADXUwKF5RQ5mwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMi0xMS0wN1QwNDoxMzoyMiswNDowMKuNWnIAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTItMTEtMDdUMDQ6MTM6MjIrMDQ6MDDa0OLOAAAAAElFTkSuQmCC">
        </div>
    </div>

    <div class="thumb">
        <div class="circleDiv">
            <!-- Getprismatic -->
            <img class="favicon"  id="favicon-7"...

JavaScript

$(".favicon").each( 
            function() { 
                $(this).on("load", function() { magic( this, avg ) }); 
            }
        );

        $("#btn1").click( 
            function() { 
                $(".favicon").each(
                    function() { magic( this, avg ) }
                ); 
            }
        );

        $("#btn2").click( 
            function() { 
                $(".favicon").each(
                    function() { magic( this, avgYUV ) }
                ); 
            }
        );

        $("#btn3").click( 
            function() { 
                $(".favicon").each(
                    function() { magic( this, euclideanDistance ) }
                ); 
            }
        );

        $("#btn4").click( 
            function() { 
                $(".favicon").each(
                    function() { magic( this, kClusters ) }
                ); 
            }
        );

        function magic( th, algo ) {
            var imgWidth  = 18;
            var imgHeight = 18;

            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');

            // Draw white Rect to avoid problems with favicon opacity
            ctx.fillStyle = 'rgb(255, 255, 255)';
            ctx.fillRect(0, 0, imgWidth, imgHeight);

            ctx.drawImage( th, 0, 0, imgWidth, imgHeight);
            try {
                var data = ctx.getImageData(0, 0, imgWidth, imgHeight);
            }
            catch(e) {
                // security error, img on diff domain
                console.log("Cross-domain error");
                return;
            }

            var rgb = algo( data );
            //var rgb = avg( data );
            //var rgb = avgYUV( data );
            //var rgb = euclideanDistance( data );
            //var rgb = kClusters( data );

            var colorString = String("rgb(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ")");
            $(th).parent().parent().css("background-color",...