JSFiddle - React, Tailwind, and code Playground

by rahulr

HTML

<div class="main"  style="float: left; margin:5px 5px 0 0; position: relative; width: 400px;">

  <div class="zone" style="position:relative; top:50px; left:10px;  width:200px; height:60px; border:1px dashed #BABABA;">
    <div class="editor" style="height:25px; padding:5px; top:-40px; width:200px; position:relative; background:#CFCFCF; border:1px dotted #D3D3D3; float: left;">
      <ul>
          <li>Bold</li>
          <li>Italic</li>
      </ul>    
    </div>
    <div class="content" contentEditable="true" spellcheck="true">
    <p>Some text</p>                                
    </div>
  </div>


  <div class="zone" style="position:relative; top:1000px; left:10px; width:200px; height:60px; border:1px dashed #BABABA;">
    <div class="editor" style="height:25px; padding:5px; top:-40px; width:200px; position:relative; background:#CFCFCF; border:1px dotted #D3D3D3; float: left;">
      <ul>
          <li>Bold</li>
          <li>Italic</li>
      </ul>    
    </div>
    <div class="content" contentEditable="true" spellcheck="true">
    <p>Some more text</p>                
    </div>
  </div>

</div>

JavaScript

$(".main").selectable({
  });

    $(".zone").each(function() {

      $(this).find(".content").click(function(e) { 
                     $('div.editor').hide(); 
        var parent = $(this).parent().parent();

        var selected = parent.find('div.zone.ui-selected');

        selected.find('div.editor').show();

      });

    });