JSFiddle - React, Tailwind, and code Playground

HTML

<div id="worng">很抱歉，你的浏览器不支持FileReader方法!请安装Firefox或者Chrome浏览器</div>

<div id="warp">
    <ul>
        <li><span>图片上传：</span><input type="file" name="file" id="file" /></li>
        <li class="line"></li>
        <li><span>广告宽度：</span><input type="text" id="adWidth"  class="short" value="580" />px</li>
        <li><span>广告高度：</span><input type="text" id="adHeight"  class="short" value="180" />px</li>
        <li class="line"></li>
        <li><span>文字背景颜色：</span>
                <a class="gray active" rgb="37,37,37">黑色</a>
                <a class="white" rgb="255,255,255">白色</a>
                <a class="yellow" rgb="244,179,0">黄色</a>
                <a class="green" rgb="120,186,0">绿色</a>
                <a class="blue" rgb="37,115,236">蓝色</a>
                <a class="red" rgb="174,17,61">红色</a>
                <a class="coffee" rgb="46,23,0">咖啡</a>
                <a class="orange" rgb="176,30,0">橙色</a>
                <a class="purple" rgb="114,0,172">紫色</a>
        </li>
        <li><span>文字背景透明度：</span><input type="text" id="bgOpacity"  class="short" value="0.5" /></li>
        <li><span>文字背景距离Top：</span><input type="text" id="bgTop"  class="short" value="110" />px</li>
        <li><span>文字背景高度：</span><input type="text" id="bgHeight"  class="short" value="70" />px</li>
        <li class="line"></li>
        <li><span>标题文字：</span><input type="text" id="titleCon"  value="标题文字" /></li>
        <li><span>标题字号：</span><input type="text" id="titleSize"  class="short" value="25" />px</li>
        <li><span>标题颜色：</span><input type="text" id="titleColor"  class="short w80" value="#fff" /></li>
        <li><span>标题距离Top：</span><input type="text" id="titleTop"  class="short" value="140" />px</li>
        <li><span>标题距离Left：</span><input type="text" id="titleLeft"  class="short" value="10" />px</li>
        <li class="line"></li>
        <li><span>描述文字：</span><input type="text" id="txtCon"   value="描述文字描述描述描述描述" /></li>
        <li><span>描述字号：</span><input type="text"...

CSS

*{margin: 0;padding: 0;font:13px Arial;list-style: none;}
#warp{border: 1px solid #ccc;border-radius: 5px;width: 380px;background-color: #ececec;margin: 10px;line-height: 1.5;}
#warp li{margin: 10px;}
#warp li.line{background-color: #ccc;height: 1px;padding: 0;line-height: 1;font-size: 0;}
#warp li span{text-align: right;width: 120px;display: inline-block;}
#warp li #bt{padding: 5px 20px;margin:5px 0 5px 130px;}
#warp li a{display:inline-block;cursor: pointer;border: 1px solid #fff;text-indent: -9999px;width: 15px;height: 15px;}
#warp li a.active{border: 3px solid #000;}
#warp input[type=text]{border-radius: 3px; border: 1px solid #ccc; height: 23px;padding-left: 3px;margin: 0 5px;}
#warp input.short{width:40px;}
#warp input.w80{width:80px;}
#mark{position: absolute;top: 10px;left:420px;}
#worng{border-bottom: 1px solid red; display: none; background-color: #ffb2b2; text-align: center;font-size: 14px; font-weight: bold; padding: 5px 0;}
#showImg{display:none;position: absolute;top: 400px;left:420px;}
#showImg h1{color: red;font-weight: bold;font-family: "微软雅黑";font-size: 16px;}

.white{background-color: white;}
.gray{background-color: gray;}
.yellow{background-color: yellow;}
.green{background-color: green;}
.blue{background-color: blue;}
.red{background-color: red;}
.coffee{background-color: #632f00;}
.orange{background-color: orange;}
.purple{background-color: purple;}

JavaScript

var _CalF = {
   $ : function(object){//选择器
     if(object === undefined ) return;
     var getArr = function(name,tagName,attr){
           var tagName = tagName || '*',
               eles = document.getElementsByTagName(tagName),
               clas = (typeof document.body.style.maxHeight === "undefined") ? "className" : "class";//ie6
               attr = attr || clas,
               Arr = [];
           for(var i=0;i<eles.length;i++){
             if(eles[i].getAttribute(attr)==name){
               Arr.push(eles[i]);
             }
           }
           return Arr;
         };
   
     if(object.indexOf('#') === 0){  //#id 
       return document.getElementById(object.substring(1));
     }else if(object.indexOf('.') === 0){  //.class
       return getArr(object.substring(1));
     }else if(object.match(/=/g)){  //attr=name
       return getArr(object.substring(object.search(/=/g)+1),null,object.substring(0,object.search(/=/g)));
     }else if(object.match(/./g)){ //tagName.className
       return getArr(object.split('.')[1],object.split('.')[0]);
     }
   },
   addHandler:function(node, type, handler){
       node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on'+ type, handler);
   },
   removeHandler: function (node, type, handler) {
       node.removeEventListener ? node.removeEventListener(type, handler, false) : node.detachEvent("on" + type, handler);
   },
   getPosition : function(obj) { //获取元素在页面里的位置和宽高
      var top = 0,
          left = 0,
          width = obj.offsetWidth,
          height = obj.offsetHeight;
  
      while(obj.offsetParent){
          top += obj.offsetTop;
          left += obj.offsetLeft;
          obj = obj.offsetParent;
      }
  
      return {"top":top,"left":left,"width":width,"height":height};
   },
   addClass:function(c,node){  // 添加样式名
       node.className = node.className + ' ' + c;
   },
   removeClass:function(c,node){ // 移除样式名
       var reg = new RegExp("(^|\\s+)" + c +...