JSFiddle - React, Tailwind, and code Playground

by felixtm

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="col-sm-12">
     <div class="parent-div">
     <div class="new-div" contenteditable="true" >
       <span data-scale-ratio="1" class="span1" data-scale-reference=".new-div">
     message
         </span>
     <a class="closeButton"></a>
     <a class="resizeButton"></a>
     </div>
        <div class="bord" style="z-index: -1;">
            <img src="https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg">
            
        </div>
        
     </div>
 </div>

CSS

.new-div { 
    z-index: 1; position: absolute; width: auto; word-break: break-all; text-align: center; left: 30%;top: 15px; border:2px solid black;}
.parent-div {  
    max-width: 236px; width: 236px; position: relative; overflow: hidden; }

.closeButton
{
    display:block;
    position:absolute;
    top:-10px;
    left:-10px;
    width:27px;
    height:27px;
    background:url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
.resizeButton
{
    display:block;
    position:absolute;
    bottom:-10px;
    right:-10px;
    width:27px;
    height:27px;
    background:url('http://img.freepik.com/free-icon/resize-button_318-99883.jpg') no-repeat center center;
    background-size: contain;
    cursor: resize;
}

JavaScript

$( '.new-div').draggable({
                                    containment: "#bord",
                                     create: function() { 
                                    $(".new-div").css("width",'auto');
                                     } ,
                                    drag: function() { 
                                    $(".new-div").css("width",'auto');
                                     } ,
                                    start: function() { 
                                    $(".new-div").css("width",'auto');
                                     } ,
                                     stop: function() { 
                                    $(".new-div").css("width",'auto');
                                     }
                                  });
         $(document).on("click",".closeButton",function(){

                                    $(this).closest('div').remove();
                                 });
         
                                 
        $(".span1").on("click", function(e){
                        
                         var mycontent1= $(this).text();
                        e.preventDefault();
                         $(".span1").focus();
                         $('.new-div').removeClass('active');
                         $(this).closest('.new-div').addClass('active');
                         
                       if(mycontent1.trim()==="message"){
                        
                        $(".span1").text('');
                        $(this).css("width","100px");
                        $(this).css("height","6%");
                        $('.new-div').css("width","100px");
                        $('.new-div').css("height","6%");
                            }
                  }); 
                      
       $("#font-size").on("change",function(){
                     var v=$(this).val();
                      $('.new-div').css('font-size', v + 'px');
                    ...