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; width: 100%; }

#preview .article-title {width: auto; font-size: 36px; font-family: Segoe UI Light;}
#preview .paragraph-title { width: auto; font-size: 24px; font-family: Segoe UI Light; margin-bottom: 12px; }
#preview .temp-title { height: 24px; width: auto; }

JavaScript

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

$('.article-title').live('blur',function()
{
    $("#title").val($(this).val());
});

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