JSFiddle - React, Tailwind, and code Playground

HTML

<div class='foggy-comparison'>
              下のレイヤーはブラエフェクトがかかってます。
            </div>
        <div class='foggy-demo select' >
          <h1>
              Lorem ipsum dolor sit amet, consectetur adipiscing
              elit. Duis commodo massa viverra diam pharetra quis
              dictum mauris bibendum. In eget tortor id risus
              suscipit facilisis. Duis luctus tortor non sem mollis
              sodales. Cras et cursus justo. Phasellus vel libero
              erat, vel mattis justo. Aenean tempor bibendum
              euismod. Vivamus erat justo, lacinia vitae facilisis
              quis, luctus sed mauris. Suspendisse lectus dolor,
              accumsan eu lacinia in, dapibus vitae nunc.
            </h1>
        </div>

CSS

.foggy-comparison-wrapper { position: relative; }
      .foggy-comparison {
        position: absolute;
        z-index: 2;
        width: 350px;
        background: #eee;
        padding: 20px;
        top: 80px;
        left: 150px;
        box-shadow: rgba(0,0,0,0.5) 0px 0px 15px;
      }
.section{margin:25px;}
p{width:450px;}
img{padding-right:20px;}

JavaScript

// Foggy, v1.02
//
// Description: jQuery plugin for blurring page elements
// Homepage:    http://nbartlomiej.github.com/foggy
// Author:      [email protected]

(function( $ ){

  $.fn.foggy = function( options ) {

    var settings = $.extend( {
      opacity:      0.8,
      blurRadius:   2,
      quality:      16,
      cssFilterSupport: true
    }, options);

    var BlurPass = function(content, position, offset, opacity){
      this.content = content;
      this.position = position;
      this.offset = offset;
      this.opacity = opacity;
    };

    BlurPass.prototype.render = function(target){
      $('<div/>', { html: this.content }).css({
        position: this.position,
        opacity: this.opacity,
        top: this.offset[0],
        left: this.offset[1]
      }).appendTo(target);
    };

    var Circle = function(radius){
      this.radius = radius;
    };

    Circle.prototype.includes = function(x,y){
      if (Math.pow(x,2) + Math.pow(y,2) <= Math.pow(this.radius, 2)){
        return true;
      } else {
        return false;
      }
    };

    Circle.prototype.points = function(){
      var results = [];
      for (var x = -this.radius; x<=this.radius; x++){
        for (var y = -this.radius; y<=this.radius; y++){
          if (this.includes(x,y)){
            results.push([x,y]);
          }
        }
      }
      return results;
    };

    var ManualFog = function(element, settings){
      this.element = element;
      this.settings = settings;
    };

    ManualFog.prototype.calculateOffsets = function(radius, quality){
      var all_offsets = $.grep(
        new Circle(radius+1).points(),
        function(element){ return (element[0] != 0) || (element[1] != 0) }
      );
      var offsets;
      if (all_offsets.length <= quality){
        offsets = all_offsets;
      } else {
        var overhead = all_offsets.length - quality;
        var targets = [];
        for (var i = 0; i < overhead; i++){
          targets.push(Math.round(i...