JSFiddle - React, Tailwind, and code Playground

by rionmonster

HTML

<div id='menu'>
<h2>Tools</h2>
<p>Title</p>
<p><input id='title' /></p>
<p>Paragraph</p>
<p><div class='p1'>P1</div><div class='p2'>P2</div><div class='p3'>P3</div></p>
</div>
<div id='preview'>
    <h2>Preview</h2>
    
</div>

CSS

* { font-family: Segoe UI; font-size: 12px; }
p { margin-bottom: 6px; width: 100%;}
#menu { width: 320px; height: 600px; border-right: 15px solid black; float: left; padding: 12px; }
h2 { font-size: 24px; padding-bottom: 12px; font-family: Segoe UI Light;}
h1 { font-size: 36px; font-family: Segoe UI Light; }
.p1,.p2,.p3 { height: 14px; width: 24px; border: 1px solid grey; float: left; margin-right: 12px; text-align: center; color: gray; }
.p1:hover,.p2:hover,.p3:hover { color: black; border: 1px solid black; cursor: pointer;}
#preview { width: 630px; height :600px; float: right; padding: 12px; }

.title { width: 100%; }
.section { margin-bottom: 12px; border: 1px dotted gray; }

.paragraph h1 { font-size: 24px; margin-bottom: 12px; }

#preview input { border: 0;

#preview .section-editable

JavaScript

$("#title").blur(function(){
    GenerateTitle($(this).val());
});
    
$(".p1").click(function(){
    GenerateParagraphTypeOne();
});

$('.section','#preview').live('click',function()
{
    alert($(this));                              
});

function GenerateTitle(title)
{
    if($('.title.section').length){$('[data-section="title"]').text(title);}
    else{
         $("#preview").append("<div class='title section'><h1 data-section='title'>" + title  + "</h1></div>");
    }
}
        
function GenerateParagraphTypeOne()
{
    var newParagraph = AssignParagraphingNumber();
    
    $("#preview").append("<div class='paragraph section'><h1 data-section='p" + newParagraph + "title'>[Paragraph Title]</h1><p data-section='p" + newParagraph + "content'>Please place your content here.</p></div>");
   
}
        
function AssignParagraphingNumber()
{
     return $(".section","#preview").length + 1;
}

function MakeEditable()
{
    
}