JSFiddle - React, Tailwind, and code Playground

by jacob4u2

HTML

<div class="overlay">
    <div class="modalWrap">

        <div class="modalContentHold rounded4">
            <p>
              Some Content 
            </p>
        </div>        
        <div class="modalTitleHold rounded7"><div>Title</div></div>
    </div>
</div>

CSS

html, body { width: 100%; height: 100% }
.overlay { width: 100%; height: 100%; background-color: black; opacity: .7; position: relative; }
.modalWrap { 
    width: 350px; min-height: 400px; margin: 0px auto;
    position: absolute;
    left: 50%; margin-left: -175px;
    top: 50%; margin-top: -200px;
}
.rounded7 {
     -moz-border-radius: 6px; /* FF1+ */
  -webkit-border-radius: 6px; /* Saf3-4, iOS 1+, Android 1.5+ */
          border-radius: 6px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
          
  /* useful if you don't want a bg color from leaking outside the border: */        
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
}
.rounded4 {
     -moz-border-radius: 4px; /* FF1+ */
  -webkit-border-radius: 4px; /* Saf3-4, iOS 1+, Android 1.5+ */
          border-radius: 4px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
          
  /* useful if you don't want a bg color from leaking outside the border: */        
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
}
.modalTitleHold {
  position: absolute;
    top: 14px;
  height: 34px;
  width: 330px;
  background-color: #037B8C;
  -moz-box-shadow: 0px 0px 6px #000; /* FF3.5+ */
  -webkit-box-shadow: 0px 0px 6px #000; /* Saf3.0+, Chrome */
  box-shadow: 0px 0px 6px #000; /* Opera 10.5, IE9, Chrome 10+ */
  padding: 0px 10px;
    font-size: 29px; color: White; font-weight: bold;
}
.modalContentHold {
    height: 440px;
    background-color: white;
    border: solid 2px brown;
    margin: 0 7px;
    padding: 59px 4px 4px 4px;
    overflow: hidden;    
}

JavaScript

/*
 * jQuery UI Effects 1.8.13
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Effects/
 */
jQuery.effects||function(f,j){function m(c){var a;if(c&&c.constructor==Array&&c.length==3)return c;if(a=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(c))return[parseInt(a[1],10),parseInt(a[2],10),parseInt(a[3],10)];if(a=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(c))return[parseFloat(a[1])*2.55,parseFloat(a[2])*2.55,parseFloat(a[3])*2.55];if(a=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(c))return[parseInt(a[1],
16),parseInt(a[2],16),parseInt(a[3],16)];if(a=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(c))return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16)];if(/rgba\(0, 0, 0, 0\)/.exec(c))return n.transparent;return n[f.trim(c).toLowerCase()]}function s(c,a){var b;do{b=f.curCSS(c,a);if(b!=""&&b!="transparent"||f.nodeName(c,"body"))break;a="backgroundColor"}while(c=c.parentNode);return m(b)}function o(){var c=document.defaultView?document.defaultView.getComputedStyle(this,null):this.currentStyle,
a={},b,d;if(c&&c.length&&c[0]&&c[c[0]])for(var e=c.length;e--;){b=c[e];if(typeof c[b]=="string"){d=b.replace(/\-(\w)/g,function(g,h){return h.toUpperCase()});a[d]=c[b]}}else for(b in c)if(typeof c[b]==="string")a[b]=c[b];return a}function p(c){var a,b;for(a in c){b=c[a];if(b==null||f.isFunction(b)||a in t||/scrollbar/.test(a)||!/color/i.test(a)&&isNaN(parseFloat(b)))delete c[a]}return c}function u(c,a){var b={_:0},d;for(d in a)if(c[d]!=a[d])b[d]=a[d];return b}function k(c,a,b,d){if(typeof c=="object"){d=
a;b=null;a=c;c=a.effect}if(f.isFunction(a)){d=a;b=null;a={}}if(typeof a=="number"||f.fx.speeds[a]){d=b;b=a;a={}}if(f.isFunction(b)){d=b;b=null}a=a||{};b=b||a.duration;b=f.fx.off?0:typeof b=="number"?b:b in...