JSFiddle - React, Tailwind, and code Playground

by zerolfc

JavaScript

var tpl_json = {"panel":"[[{\"id\":\"heading\",\"sm_col\":12,\"css\":\"{\\\"colourbg\\\":\\\"blue\\\",\\\"height\\\":\\\"50px\\\"}\",\"element\":[]},{\"id\":\"side1\",\"sm_col\":4,\"css\":\"{\\\"colourbg\\\":\\\"red\\\",\\\"height\\\":\\\"350px\\\"}\",\"element\":[]},{\"id\":\"side2\",\"sm_col\":8,\"css\":\"{\\\"colourbg\\\":\\\"green\\\",\\\"height\\\":\\\"250px\\\"}\",\"element\":\"[{\\\"type\\\":\\\"button\\\",\\\"id\\\":\\\"ifield\\\",\\\"xs_col\\\":8,\\\"sm_col\\\":4,\\\"css\\\":\\\"{\\\\\\\"height\\\\\\\":\\\\\\\"25px\\\\\\\",\\\\\\\"width\\\\\\\":\\\\\\\"100%\\\\\\\"}\\\",\\\"element\\\":{\\\"field_id\\\":\\\"ifield\\\",\\\"field_name\\\":\\\"ifield\\\",\\\"text\\\":\\\"New Button\\\",\\\"action\\\":\\\"submit\\\",\\\"action_value\\\":\\\"main\\\",\\\"field_form\\\":\\\"main\\\"}},{\\\"type\\\":\\\"textfield\\\",\\\"id\\\":\\\"ifield\\\",\\\"xs_col\\\":8,\\\"sm_col\\\":4,\\\"css\\\":\\\"{\\\\\\\"height\\\\\\\":\\\\\\\"25px\\\\\\\",\\\\\\\"width\\\\\\\":\\\\\\\"100%\\\\\\\"}\\\",\\\"element\\\":{\\\"field_id\\\":\\\"ifield1\\\",\\\"field_name\\\":\\\"ifield1\\\",\\\"field_form\\\":\\\"main\\\"}}]\"},{\"id\":\"footer\",\"sm_col\":12,\"css\":\"{\\\"colourbg\\\":\\\"black\\\",\\\"height\\\":\\\"150px\\\"}\",\"element\":[]}]]","background":"[{\"colourbg\":\"#ccc\",\"image\":\"none\",\"aHorizontal\":0,\"aVertical\":0,\"cover\":0}]"};

var tpl_json_string =...