JSFiddle - React, Tailwind, and code Playground

by chepe263

HTML

<div id="main">

        <div class="pantalla" id="pantalla1">
        </div>
        
        
        <div class="pantalla preguntaHandle" id="pantalla2">
        <!--div id="abuscar">Busca <span id="cureItem"></span> a continuación.</div-->
       <a href="#" id="switch">On</a><br /><span>x:</span><span id="pic1X"></span><span>px; y:</span><span id="pic1Y"></span>px
        
        <div class="radius preguntaHandle" id="tolerancia"></div>
        </div>
        
        
        <div class="pantalla" id="pantalla3">
        
        
        </div>
        <div class="pantalla" id="pantalla4">
        <p>Su resultado fue bueno....</p>
        </div>
</div>

CSS

#main{
  border: 1px solid green;
    height: 415px;
    width: 744px;
    border-radius: 30px;

}


.pantalla
{
    display:none;
    width:95%;
    height:90%;
    border: 2px dashed blue;
    padding: 20px;
    
    }    

#pantalla2
{
    display:block;
    position: relative;
    overflow: hidden;
    }    
        
        
.radius
{
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    width: 150px;
    height:150px;
    xborder: 1px solid black;
    xbackground-color: limegreen;
    position: absolute;
    float: left;
    }

JavaScript

///
(function(o,c){var j="backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor color outlineColor".split(" "),g=/^([\-+])=\s*(\d+\.?\d*)/,f=[{re:/rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,parse:function(p){return[p[1],p[2],p[3],p[4]]}},{re:/rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,parse:function(p){return[2.55*p[1],2.55*p[2],2.55*p[3],p[4]]}},{re:/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/,parse:function(p){return[parseInt(p[1],16),parseInt(p[2],16),parseInt(p[3],16)]}},{re:/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/,parse:function(p){return[parseInt(p[1]+p[1],16),parseInt(p[2]+p[2],16),parseInt(p[3]+p[3],16)]}},{re:/hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,space:"hsla",parse:function(p){return[p[1],p[2]/100,p[3]/100,p[4]]}}],d=o.Color=function(q,r,p,s){return new o.Color.fn.parse(q,r,p,s)},i={rgba:{cache:"_rgba",props:{red:{idx:0,type:"byte",empty:true},green:{idx:1,type:"byte",empty:true},blue:{idx:2,type:"byte",empty:true},alpha:{idx:3,type:"percent",def:1}}},hsla:{cache:"_hsla",props:{hue:{idx:0,type:"degrees",empty:true},saturation:{idx:1,type:"percent",empty:true},lightness:{idx:2,type:"percent",empty:true}}}},n={"byte":{floor:true,min:0,max:255},percent:{min:0,max:1},degrees:{mod:360,floor:true}},l=i.rgba.props,m=d.support={},a,k=o.each;i.hsla.props.alpha=l.alpha;function h(r,t,q){var p=n[t.type]||{},s=t.empty||q;if(s&&r==null){return null}if(t.def&&r==null){return t.def}if(p.floor){r=~~r}else{r=parseFloat(r)}if(r==null||isNaN(r)){return t.def}if(p.mod){r=r%p.mod;return r<0?p.mod+r:r}return p.min>r?p.min:p.max<r?p.max:r}function e(p){var r=d(),q=r._rgba=[];p=p.toLowerCase();k(f,function(x,y){var w=y.re.exec(p),v=w&&y.parse(w),u,t=y.space||"rgba",s=i[t].cache;if(v){u=r[t](v);r[s]=u[s];q=r._rgba=u._rgba;return...