JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="main"></div>

CSS

#main{
    width:1280px;
    height:720px;
    background:silver;
}




















@keyframes vex-flyin {
  /* line 25, ../sass/_keyframes.sass */
  0% {
    opacity: 0;
    transform: translateY(-40px);
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
  }

  /* line 28, ../sass/_keyframes.sass */
  100% {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }
}
@-webkit-keyframes vex-flyin {
  /* line 25, ../sass/_keyframes.sass */
  0% {
    opacity: 0;
    transform: translateY(-40px);
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
  }

  /* line 28, ../sass/_keyframes.sass */
  100% {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }
}
@-moz-keyframes vex-flyin {
  /* line 25, ../sass/_keyframes.sass */
  0% {
    opacity: 0;
    transform: translateY(-40px);
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
  }

  /* line 28, ../sass/_keyframes.sass */
  100% {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }
}
@-ms-keyframes vex-flyin {
  /* line 25, ../sass/_keyframes.sass */
  0% {
    opacity: 0;
    transform: translateY(-40px);
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
  }

  /* line 28, ../sass/_keyframes.sass...

JavaScript

/*
var winoptions = {
	"left" 		: "20px", 
    "top" 		: "20px", 
    "width" 	: "1240px", 
    "height" 	: "680px",
    "style"		: "list",
    "return"	: function(){},
    "enter"		: function(selobj){},
    "title"     : "select video",
    "obj"		: {}
    
};


function PopupWindow ( options ) {
    var styles = ["list","wall","check","yesno", "info", "input"];
	this.wondowpos = { "left" : "20px", "top" : "20px", "width" : "1240px", "height" : "680px"};
    this.style = styles[0];
    
    if( "object" == typeof options )
    {
    	if (options.hasOwnProperty('left')) { 
            this.wondowpos.left = options.left;
        }
    	if (options.hasOwnProperty('top')) { 
            this.wondowpos.left = options.top;
        }
    	if (options.hasOwnProperty('width')) { 
            this.wondowpos.left = options.width;
        }
    	if (options.hasOwnProperty('height')) { 
            this.wondowpos.left = options.height;
        }
    	if (options.hasOwnProperty('style') && options.style in styles ) { 
            this.wondowpos.style = options.style;
        }
    }
}


PopupWindow.prototype = {
    constructor: PopupWindow,
    show:function ()  {        
    },
    hide:function ()  {
    },
    onKeyDown:function (event){
    }
}

*/


/*! vex.js, vex.dialog.js 2.3.2 */
(function(){var a;a=function(a){var b,c;return b=!1,a(function(){var d;return d=(document.body||document.documentElement).style,b=void 0!==d.animation||void 0!==d.WebkitAnimation||void 0!==d.MozAnimation||void 0!==d.MsAnimation||void 0!==d.OAnimation,a(window).bind("keyup.vex",function(a){return 27===a.keyCode?c.closeByEscape():void 0})}),c={globalID:1,animationEndEvent:"animationend webkitAnimationEnd mozAnimationEnd MSAnimationEnd...