JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<script src="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400"></script>
<div id="dialog">
  <div class="title-bar" contenteditable>My new dialog</div>
  <div class="container row">

    <div class="panel">
      <div class="static-text" contenteditable>Lipsum</div>
    <br>
    <input name="radio1" type="radio">
    <label for="radio1" contenteditable> Radio button</label>
    <br>
    <br>
    <div class="button" contenteditable>Ok</div>
    <div class="button" contenteditable>Cancel</div>
    </div>
    
    <div class="panel">
      <div class="static-text" contenteditable>Lipsum</div>
    <br>
    <input name="radio1" type="radio">
    <label for="radio1" contenteditable> Radio button</label>
    <br>
    <br>
    <div class="button" contenteditable>Ok</div>
    <div class="button" contenteditable>Cancel</div>
    </div>
    
  </div>
</div>

<div id="background">
  <svg id="bg-blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">

    <defs>
      <style>.cls-1{stroke:#231f20;stroke-miterlimit:10;fill:url(#linear-gradient);}</style>
      <linearGradient id="linear-gradient" x1="280.52" y1="0.5" x2="280.52" y2="560.55" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#f08f48"/>
        <stop offset="1" stop-color="#ea646a"/>
      </linearGradient>
    </defs>
    <rect class="cls-1" filter="url(#bg-filter)" x="0.5" y="0.5" width="100%" height="100%"/>
    
    <filter id="bg-filter">
      <feGaussianBlur stdDeviation="2" />
    </filter>
    <mask id="bg-circle">
      <circle cx="-50%" cy="-50%" r="40" fill="white" filter="url(#bg-filter)" />
    </mask>
    
    <defs> 
      <style>.cls-2{ fill:#fff; } .cls-3{ fill:#fff; }</style>
      <pattern id="transparency-grid" width="18" height="18" patternUnits="userSpaceOnUse">
        <rect class="cls-2" x="0" y="0" width="9" height="9" opacity="0.1"/>
        <rect class="cls-3" x="9" y="0" width="9" height="9"/>
        <rect...

SCSS

html, body {
  min-width: 100%;
  height: 100%;
  background-image: linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%);
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

[contenteditable] {
  position: relative;
  z-index: 0;
  outline: none;
}
[contenteditable]:after {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba( 100,100,0, .5 );
  background: #000;
}

#dialog {
  position: relative;
  z-index: 1;
  display: inline-block;
  min-height: 30px;
  min-width: 30px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0px 2px 4px rgba(0,0,0,.5), 0px 2px 20px 3px rgba(0,0,0,.2);
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 13px;
  line-height: 15px;
  font-weight: 400;
  
  .title-bar {
    text-align: center;
    border-top: 1px solid #f4f4f4;
    border-bottom: 1px solid #b6b6b6;
    color: #333333;
    min-height: 20px;
  line-height: 20px;
    background: linear-gradient(to bottom, #e5e5e5 0%,#d3d3d3 100%); 
  }
  .container {
    padding: 18px;
    background: #323232;
    min-height: 20px;
    color: #b2b2b2;
  }
  .container.row > * {
    display: inline-block;
  }
}

#dialog {
  .button {
    padding: 0px 7px;
    display: inline-block;
    min-width: 25px;
    line-height: 25px;
    min-height: 25px;
    border: 1px solid #c1c1c1;
    border-radius: 13px;
  }
}


/* BG UNBLUR - ERASE */

#background {
  position: fixed;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
#bg-blur {
  height: 100%;
}  
#bg-circle circle {
  opacity: .24;
  transition: all 500ms linear;
}

JavaScript

var svgNS = "http://www.w3.org/2000/svg";

$('body').mousemove(function(event) {
  event.preventDefault();
  var upX = event.clientX;
  var upY = event.clientY;
  var mask = $('#bg-circle')[0];

  var circle = document.createElementNS(svgNS, "circle");
  circle.setAttribute("cx", upX);
  circle.setAttribute("cy", upY);
  circle.setAttribute("r", "40");
  circle.setAttribute("fill", "white");
  circle.setAttribute("filter", "url(#bg-filter)");
  
  mask.appendChild(circle);

  setTimeout(function() {
    circle.style.opacity = '0';
		circle.setAttribute("r", "10");
    setTimeout(function() {
      mask.removeChild(circle);
    }, 400);
  }, 400);
});