JSFiddle - React, Tailwind, and code Playground

HTML

<center><p>
	<form>
		<table style="border: opx;">
			<tr>
				<td>
					<input id="blur" name="pickFiltro" type="radio" onchange="aplicaFiltro()" value="blur"/>blur()							
				</td>
				<td>
					<input id="brightness" name="pickFiltro" type="radio" onchange="aplicaFiltro()" value="brightness"/>brightness()						
				</td>
				<td>
					<input id="contrast" name="pickFiltro" type="radio" onchange="aplicaFiltro()" value="contrast"/>contrast()						
				</td>
				<td>
					<input id="drop-shadow" name="pickFiltro" type="radio" onchange="aplicaFiltro()" value="drop-shadow"/>drop-shadow()						
				</td>
				<td>
					<input id="grayscale" name="pickFiltro" type="radio" onchange="aplicaFiltro()" value="grayscale"/>grayscale()							
				</td>
			</tr>
			<tr>
				<td>
					<input id="sepia" name="pickFiltro" type="radio" onchange="aplicaFiltro()" value="sepia"/>sepia()						
				</td>
				<td>
					<input id="hue-rotate" name="pickFiltro" type="radio" onchange="aplicaFiltro()" value="hue-rotate"/>hue-rotate()						
				</td>
				<td>
					<input id="invert" name="pickFiltro" type="radio" onchange="aplicaFiltro()" value="invert"/>invert()						
				</td>
				<td>
					<input id="opacity" name="pickFiltro" type="radio" onchange="aplicaFiltro()" value="opacity"/>opacity()					
				</td>
			</tr>				
		</table>
	</form>
	
	<img  id="imgFiltro" src="//modacombiscoitos.files.wordpress.com/2012/09/cultura-pop-coreana_bairro-de-shin-okubo.jpg" alt="imagem para filtro" style=""/>
	
    </p></center>

CSS

.body{
    margin: o;
}

.blur{
    -webkit-filter: blur(5px);
    filter:  blur(5px);
}

.brightness{
    -webkit-filter: brightness(2);
    filter: brightness(2);
}

.contrast{
    -webkit-filter: contrast(4);
    filter: contrast(4);
}

.drop-shadow{
    -webkit-filter: drop-shadow(10px 10px 7px rgba(0, 0, 0, .7));
    filter: drop-shadow(10px 10px 7px rgba(0, 0, 0, .7));
}

.grayscale{
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

.sepia{
    -webkit-filter: sepia(1);
    filter: sepia(1);
}

.hue-rotate{
    -webkit-filter: hue-rotate(90deg);
    filter: hue-rotate(90deg);
}

.invert{
    -webkit-filter: invert(.3);
    filter: invert(.3);
}

.opacity{
    -webkit-filter: opacity(.5);
    filter: opacity(.5);
}

JavaScript

function aplicaFiltro(){
    var img = document.getElementById("imgFiltro");
    img.className = "";
    
    if( document.getElementById("blur").checked ){
        img.className += " blur";
    }
    if( document.getElementById("brightness").checked ){
        img.className += " brightness";
    }
    if( document.getElementById("contrast").checked ){
        img.className += " contrast";
    }
    if( document.getElementById("drop-shadow").checked ){
        img.className += " drop-shadow";
    }
    if( document.getElementById("grayscale").checked ){
        img.className += " grayscale";
    }
    if( document.getElementById("sepia").checked ){
        img.className += " sepia";
    }
    if( document.getElementById("hue-rotate").checked ){
        img.className += " hue-rotate";
    }
    if( document.getElementById("invert").checked ){
        img.className += " invert";
    }
    if( document.getElementById("opacity").checked ){
        img.className += " opacity";
    }
}