JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<form action="" class="col">
    <ul>
        <li><h3>Add Links</h3></li>
        <li>
            <label>
                <strong>URL</strong>
                <input type="text" class="lnurl" value="http://www." />
            </label>
        </li>
        <li>
            <label>
                <strong>Name</strong>
                <input type="text" class="lname" />
            </label>
        </li>
        <li>
            <input type="submit" value="Add" />
        </li>
    </ul>
</form>
<div class="col">
    <h3>Preview</h3>
    <ul id="preview">
        
    </ul>
    <button id="generate">Generate HTML</button>
</div>
<div class="html">
    <h3>Generated HTML</h3>
    <pre></pre>
</div>

CSS

* {font-family: 'Segoe UI';}
h3, strong {font-weight: normal; margin: 0; padding: 0;}
h3 {font-size: 1.2em; padding: 5px; background-color: #0ff; margin: 0 0 5px;}

form ul, form ul li {margin: 0; padding: 0; list-style: none;}
form ul li label {display: block; padding: 5px;}
form ul li label strong {display: inline-block; width: 75px;}
form ul li > input {margin: 5px 0 0 84px;}

.col {width: 50%; float: left; border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 0 10px;}
.col button {margin: 10px 10px 5px;}
.html {clear: both; border: 1px solid #ccc;}

pre {white-space: pre-wrap; word-break: break-word; margin: 5px; border: 1px solid #ccc; background-color: #eee; padding: 5px; line-height: 1; font-family: Consolas;}

JavaScript

$(document).ready(function () {
    $("form").submit(function (e) {
        e.preventDefault();
        lnurl = $(".lnurl").val();
        lname = $(".lname").val();
        $("#preview").append('<li><a href="' + lnurl + '">' + lname + '</a></li>');
        $(".lnurl").val("http://www.").focus();
        $(".lname").val("");
    });
    $("#generate").click(function () {
        $("pre").html(("<ul>" + $("#preview").html() + "</ul>").replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'));
    });
});