JSFiddle - React, Tailwind, and code Playground

by Rejith R Krishnan

HTML

<input name="color" type="radio" value="gray" checked />Gray<br/>
<input name="color" type="radio" value="sepia"/>Sepia
<div class="imageDiv gray">
    <img src="http://i.stack.imgur.com/CE5lz.png" />
</div>

CSS

img {
         display: block;
         width: 50%;
     }
     .sepia {
         -webkit-filter: sepia(1);
         filter: sepia(1);
     }
     .gray {
         -webkit-filter: grayscale(1);
         filter: grayscale(1);
     }

JavaScript

$('input[name="color"]').on('change', function () {
    $('div.imageDiv')
        .addClass($(this).val())
        .removeClass($(this).val() == 'gray' ? 'sepia' : 'gray');
});