JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <form action="">
<input name="filter" type="radio" id="hue"><label for="hue">Hue-rotate</label>
<input name="filter" type="radio" id="grayscale"><label for="grayscale">Grayscale</label>
<input name="filter" type="radio" id="sepia"><label for="grayscale">Sepia</label>
<img class="target-img" src="http://forum.htmlbook.ru/public/style_images/htmlbook/logo.png" alt="htmlbook.ru" width="186" height="46">
    </form>
</body>
</html>

CSS

#hue:checked ~ .target-img {  
   -webkit-filter: hue-rotate(50deg); 
}

#grayscale:checked ~ .target-img {  
    -webkit-filter: grayscale(100%);
}

#sepia:checked ~ .target-img {  
    -webkit-filter: sepia(100%);
}