JSFiddle - React, Tailwind, and code Playground

by fallenreaper

CSS

a {
    display:block;
    text-align: center;
    background-color: teal;
    border-radius:10px;
    border: solid 1px black;
}
a:hover {
    cursor:pointer;
    background-color: pink;
}
.pallet {
    width:300px;
    height:200px;
    background-color: blue;
}
textarea.workspace {
    width:100%;
    height:100%;
}
input.classname {
    width:100%;
    height:100%;
}
table.outerTable {
    background-color: cyan;
    border: solid black 5px;
    border-radius: 10px;
}

JavaScript

$(function () {
    var $table = $("<table />"),
        $tr = $("<tr />"),
        $td = $("<td />"),
        $workspace = $("<textarea class='workspace'/>"),
        $classname = $("<input type='text' class='classname'/>"),
        $out = $("<div class='pallet' />"),
        $update = $("<a class='update' />"),
        $save = $("<a class='save' />"),
        $cancel = $("<a class='cancel' />"),
        $select = $("<select class='stylegroup_data_css' />"),
        $returning = $table.clone().css("width", "100%").append($tr.clone().append($td.clone().append($save)).append($td.clone().append($cancel))),
        $wrapper = $("<div />");

    $save.text("Save");
    $cancel.text("Cancel");
    $update.text("Update");

    $("style.stylegroup_data_css").each(function () {
        $(this).removeClass("stylegroup_data_css");
        $select.append($("<option />").text($(this).attr("class")).val($(this).attr("class")));
        $(this).addClass("stylegroup_data_css");
    });
    $table.addClass("outerTable").append($tr.clone().append($td.clone().append($classname)).append($td.clone().append($select)));
    $table.append($tr.clone().append($td.clone().append($workspace)).append($td.clone().append($out)));
    $table.append($tr.clone().append($td.clone()).append($td.clone().append($update)));
    $table.append($tr.clone().append($td.clone()).append($td.clone().append($returning)));
    $wrapper.append($table);
    $("body").append($wrapper);

    $update.on("click", function () {
        $("head > style.test_data_css").remove();
        $("head").append($("<style class='test_data_css' />").append($("textarea.workspace").val()));
        $("head").append($("<style class='stylegroup_data_css " + $classname.val() + "' />").append($("textarea.workspace").val()));
        $out.html($("<div />").addClass($classname.val()).append("Dummy Text"));

        $select.html("");
        $("style.stylegroup_data_css").each(function () {
           ...