JSFiddle - React, Tailwind, and code Playground

by thindery

HTML

<ul class="more-shapes">
    <li><img src="http://www.papermusepress.com/media/test/shape1-example.png" /></li>
    <li class="selected"><img src="http://www.papermusepress.com/media/test/shape1-example.png" /></li>
    <li><img src="http://www.papermusepress.com/media/test/shape1-example.png" /></li>
    <li><img src="http://www.papermusepress.com/media/test/shape1-example.png" /></li>
    <li class="selected"><img src="http://www.papermusepress.com/media/test/shape1-example.png" /></li>
    <li class="selected"><img src="http://www.papermusepress.com/media/test/shape1-example.png" /></li>   
</ul>

CSS

ul.more-shapes {
    list-style: none;
    display:inline-block;
}

ul.more-shapes li {
    background-color: white; 
    float: left;
    margin-right: 20px;
    overflow:hidden;
    height:34px;
}

ul.more-shapes li.selected {
    background-color: #f2ada4;
}

JavaScript

$("li img").click(function() {
    $("li img").parent("li").removeClass("selected");
    $(this).parent("li").addClass("selected");			
});