JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
    <style>
        #filtered {
            background-color: green;
            width: 100px;
            height: 100px;
            -webkit-filter: blur(0px);
            -webkit-transition: -webkit-filter 2s linear;
        }
    </style>
    <script>
        function animateBlur()
        {
            document.getElementById("filtered").style.webkitFilter = "blur(10px)";
        }
    </script>
<head>
<body>
    <div id="filtered"></div>
    <button onclick="animateBlur()">Animate Blur</button>
</body>
</html>