JSFiddle - React, Tailwind, and code Playground

by jeka5555

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        img {
 -webkit-filter: blur(10px);
}
    </style>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/js/jquery.magnify.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/css/magnify.css" rel="stylesheet"/>


<img src="https://lh5.googleusercontent.com/-HZeCmqEdeqy4X1nzfpbz18canv14sOdwtRt4BfQP-7l8oW2S3pZxW51hp1td6hPTgtmv-ssHGLM6Alh-P3XVtQFqS8-51Uh86wq-dHZ" class="zoom" data-magnify-src="https://lh5.googleusercontent.com/-HZeCmqEdeqy4X1nzfpbz18canv14sOdwtRt4BfQP-7l8oW2S3pZxW51hp1td6hPTgtmv-ssHGLM6Alh-P3XVtQFqS8-51Uh86wq-dHZ">
    <script type="text/javascript">
  
        $(document).ready(function() {
  $('.zoom').magnify({limitBounds: false, fixedModalSize: false, finalWidth: 600, finalHeight: 600, magnifiedWidth: 600, magnifiedHeight: 600});
});
    </script>
</body>
</html>