JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Builder</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<!-- Toolbox (Draggable Items) -->
<div id="toolbox">
    <div class="draggable-item" data-type="input">
        Text Input
    </div>
    <div class="draggable-item" data-type="textarea">
        Textarea
    </div>
    <div class="draggable-item" data-type="info_area">
        Info Area Only
    </div>
    <!-- ... other draggable items ... -->
</div>

<!-- Drop Area -->
<ul id="drop-area">
    <!-- Form elements will be added here -->
</ul>

<!-- Settings Pane -->
<div id="settings-pane" style="display:none;">
    <label>
        Label: <input type="text" id="input-label">
    </label>
    <label>
        Default Value: <input type="text" id="default-value">
    </label>
    <label>
        List Style:
        <select id="li-style">
            <option value="none">None (Use Div)</option>
            <option value="circle">Circle</option>
            <!-- ... other styles ... -->
        </select>
    </label>
    <label>
        List Number: <input type="number" id="li-number">
    </label>
    <button id="apply-settings">Apply Settings</button>
</div>

<!-- Save Button -->
<button id="save-form">Save Form</button>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
</body>
</html>

CSS

#toolbox {
    width: 200px;
    float: left;
    border: 1px solid #ddd;
    padding: 10px;
}

.draggable-item {
    padding: 5px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    cursor: pointer;
}

#drop-area {
    width: calc(100% - 220px);
    float: right;
    border: 1px solid #ddd;
    min-height: 300px;
    padding: 10px;
}

#settings-pane {
    clear: both;
    padding: 20px;
    border-top: 1px solid #ddd;
    margin-top: 20px;
}