JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<div class="container">
    <select id="typeSelector">
        <option value="type1">Type 1</option>
        <option value="type2">Type 2</option>
        <option value="type3">Type 3</option>
    </select>
    <div class="images">
        <div class="image type1">
            <img src="http://lorempixel.com/100/100/animals/" width="100" height="100"/>
        </div>
        <div class="image type1">
            <img src="http://lorempixel.com/100/100/sports/" width="100" height="100"/>
        </div>
        <div class="image type2">
            <img src="http://lorempixel.com/100/100/business/" width="100" height="100"/>
        </div>
        <div class="image type3">
            <img src="http://lorempixel.com/100/100/" width="100" height="100"/>
        </div>
        </div>
</div>

CSS

.image{
    float:left;
}
#typeSelector{
    margin-bottom:10px;
}

JavaScript

$(document).ready(function(){
    $("#typeSelector").change(function(){
        $(".image").each(function(){
            $(this).hide();
            if($(this).hasClass($("#typeSelector").val())){
               $(this).show();
            }
        });
    });
});