JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<img src="http://i077.radikal.ru/1103/3a/650a8678f5d1.jpg" alt="" id="thumb">

CSS

#thumb {
  width:120px;height:80px;
  cursor:pointer;
}

* {
    margin:0;
    padding:0;
    
}

body {
  position:relative;
  z-index:1;
  height:400px;
}

#overlay {
z-index:1000;
height:100%;
width:100%;
color:red;
background:#333;
position:absolute;  
opacity:0.5;
}

#yellow {
z-index:1000;
height:100%;
width:100%;
color:red;
background:yellow;
position:absolute;  
opacity:0.5;  
}

JavaScript

var homme = function(color,id){
  this.color = color;
  this.id = id; 
  if(!id){this.id = "overlay";}
  if(!color){this.color = "#333";}
  this.say = "no_way";
  this.style = "background:" + this.color;
}; 

var settings = {
  opacity : 0.5,
  zIndex : 1000,
  height : "100%",
  width : "100%",
  position : "absolute"
};

var clips = {
    id : function (id){
        if(!id){id = "overlay"} 
        else {
            switch (id){
                case "yellow" : id = "th_yellow" ; break;
                case "green": id = "th_green"; break ; 
                case "light": id = "th_light" ; break ;    
            };
        };
        return id;
       }
};




var prem = $.extend(settings, clips);

console.log(prem.id());


$("#thumb").click(function(){
 var sem = new homme("#333","yellow");
 $('body').prepend("<div id="+ sem.id +"> </div>");

});