JSFiddle - React, Tailwind, and code Playground

by Curt

HTML

<script src="http://lokeshdhakar.com/projects/color-thief/js/color-thief.js"></script>
<ul>
    <li>
        <img src="http://cdn2.next.co.uk/Common/Items/Default/Default/ItemImages/search/224x336/903397.jpg?G30" />
    </li>
    <li>
        <img src="http://cdn2.next.co.uk/Common/Items/Default/Default/ItemImages/Search/224x336/890020.jpg" />
    </li>
    <li>
        <img src="http://cdn2.next.co.uk/Common/Items/Default/Default/ItemImages/Search/224x336/876840.jpg?G30" />
    </li>
    <li>
        <img src="http://cdn2.next.co.uk/Common/Items/Default/Default/ItemImages/Search/224x336/896894.jpg?G30" />
    </li>
    <li>
        <img src="http://cdn2.next.co.uk/Common/Items/Default/Default/ItemImages/Search/224x336/950516.jpg" />
    </li>
    <li>
        <img src="http://cdn2.next.co.uk/Common/Items/Default/Default/ItemImages/Search/224x336/678389.jpg?G30" />
    </li>
    <li>
        <img src="http://cdn2.next.co.uk/Common/Items/Default/Default/ItemImages/Search/224x336/392916.jpg?G30" />
    </li>
    <li>
        <img src="http://cdn2.next.co.uk/Common/Items/Default/Default/ItemImages/Search/224x336/806198.jpg" />
    </li>
    <li>
        <img src="http://cdn2.next.co.uk/Common/Items/Default/Default/ItemImages/search/224x336/718736.jpg" />
    </li>
    <li>
        <img src="http://cdn2.next.co.uk/Common/Items/Default/Default/ItemImages/Search/224x336/681808.jpg?G30" />
    </li>
    <li>
        <img src="http://cdn2.next.co.uk/Common/Items/Default/Default/ItemImages/Search/224x336/904612.jpg" />
    </li>
    <li>
        <img src="http://cdn2.next.co.uk/Common/Items/Default/Default/ItemImages/Search/224x336/901797.jpg" />
    </li>
</ul>

CSS

ul
{
    list-style-type:none;
}

ul li
{
    float:left;
    width:150px;
}

ul li img
{
    width:80%;
    margin:0 auto;
    padding:20px;
}

JavaScript

$(function(){
    
    $("ul li").each(function(i,v){
       var $this = $(this);
       var $img = $this.find("img");
       //var c = ColorThief.getColor($img[0], 5); 
        console.log(ColorThief.getColor);
    });
    
});