JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<section class="cols">
    <span><span>blur</span><input type="range" onchange="set('blur', this.value + 'px');" value="0" step="1" min="0" max="10"></span>
    <span><span>grayscale</span><input type="range" onchange="set('grayscale', this.valueAsNumber);" value="0" step="0.1" min="0" max="1"></span>
    <span><span>drop-shadow</span><input type="range" onchange="set('drop-shadow', this.value + 'px ' + this.value + 'px 20px black');" value="0" step="1" min="0" max="100"></span>
    <span><span>sepia</span><input type="range" onchange="set('sepia', this.valueAsNumber);" value="0" step="0.1" min="0" max="1"></span>
    <span><span>brightness</span><input type="range" onchange="set('brightness', this.valueAsNumber);" value="0" step="0.1" min="0" max="10"></span>
    <span><span>contrast</span><input type="range" onchange="set('contrast', this.valueAsNumber);" value="0" step="0.1" min="0" max="10"></span>
    <span><span>hue-rotate</span><input type="range" onchange="set('hue-rotate', this.value + 'deg');" value="0" step="30" min="0" max="360"></span>
    <span><span>invert</span><input type="range" onchange="set('invert', this.valueAsNumber);" value="0" step="0.1" min="0" max="1"></span>
    <span><span>saturate</span><input type="range" onchange="set('saturate', this.valueAsNumber);" value="0" step="0.1" min="0" max="10"></span>
    <span><span>opacity</span><input type="range" onchange="set('opacity', this.valueAsNumber);" value="0" step="0.1" min="0" max="1"></span>
    <span><button onclick="reset()" style="margin-top:10px;">reset</button></span>
  </section>

CSS

/*Filter styles*/
.saturate {-webkit-filter: saturate(3);}
.grayscale {-webkit-filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px);}
.invert {-webkit-filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);}
.opacity {-webkit-filter: opacity(50%);}

 -webkit-filter: saturate(3) grayscale(100%) contrast(160%) brightness(60%) blur(3px) invert(100%) sepia(100%) hue-rotate(180deg) opacity(50%);