JSFiddle - React, Tailwind, and code Playground

by ramstheroyal

HTML

<div class="src">
      ldsa fsdlfs fdsad fslfd sdf ldsafl kdsajf lsadf
    sdf dsaflkdsaf ldsafk dsafdsa
    fdsafkd saf sldakf lsd.k fjsda fsd
    fsdfl ksdaf lksdf lsfkjs adf
</div>

CSS

.src{
    border:1px solid red;
    width:200px;
    height:auto;
    padding:5px;
    position:relative;
    z-index:99;   
}
.frag{  
  width:100px;
  height:50px;  
  background:#B5B5EE;
  position:absolute;
  top:20px;
  left:20px;
  -webkit-font-smoothing:subpixel-antialiased; 
  background-attachment:scroll;
  background-clip:border-box;
  background-size: auto;  
  background-origin: padding-box;
  text-rendering: optimizelegibility;  
  z-index:1;
}

JavaScript

$('.src').click(function(){
     var frag = document.createDocumentFragment();
     var div =  document.createElement('div');
         div.className = 'frag';
     frag.appendChild(div);
     this.appendChild(frag);
});