JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<div>
<h5>Section Name</h5>
<ul>
    <li>
        <label>Title</label>
        <input type="text" />
    </li>
    <li>
        <label>Description</label>
        <textarea></textarea>
    </li>
</ul>
<h5>Css Style</h5>
<ul>
    <li>
        <label>Title</label>
        <input type="text" /> px
        <input type="text" /> color
    </li>
    <li>
        <label>Description</label>
        <input type="text" />
        <input type="text" />
    </li>
    <li>
        <label>Border</label>
        <input type="checkbox" /> Left
        <input type="checkbox" /> Right
        <input type="checkbox" /> Bottom
        <input type="checkbox" /> Top
        <input type="checkbox" /> All
        <input type="text" /> px
        <input type="text" /> color
    </li>
    <li>
        <label>Background</label>
        <input type="text" />
    </li>
    <li>
        <label>Column Size</label>
        <input type="text" />
    </li>
</ul>
</div>

CSS

[]

JavaScript

var sections = [
    {
        Title : "",
        Description : "",
        CssStyle : {
            BackgroundColor: "",
            BorderTop: "",
            BorderRight: "",
            BorderBottom: "",
            BorderLeft: "",
            BorderAll: "",
            BorderSize: "",
            BorderColor: "",            
            TitleFontSize: "",
            TitleFontColor: "",
            DescriptionFontSize: "",
            DescriptionFontColor: "",
            ColumnSize: "",
        },
        MapToSection: 0
    },
    {
        
    }
    
    ]