JSFiddle - React, Tailwind, and code Playground

HTML

<?= Form::open([
            'class' => 'layout',
            'name' => 'map',
            'id' => 'map'
        ]) ?>

        <div class="layout-row">
<div class="main">
<div id="leftbar">
<div class="setting-boxes">
<h3>Visual Settings </h3>
      <div id="default-settings">    
       
        <table><tr>
            <td>Background Color</td>
            <td><input type="text" name="bg_color" class="color {hash:true, adjust:false}" value="#FFFFFF" onchange="drawVisualization();" /></td>
          </tr>
          <tr>
            <td >Map Border Color</td>
            <td><input type="text" name="border_color" class="color {hash:true, adjust:false}" value="#FFFFFF" onchange="drawVisualization();" /></td>
          </tr>
          <tr>
            <td >Map Border Width (px)</td>
            <td><input name="border_stroke" type="text" onchange="drawVisualization();" value="0" /></td>
          </tr>
 </tr>
 </table>
</div> 

<div class="form-buttons">
            <div class="loading-indicator-container">
                <button
                    type="submit"
                    data-request="onTestsave"
                    data-hotkey="ctrl+s, cmd+s"
                    data-load-indicator="Creating wereldkaart..."
                    class="btn btn-primary">
                    Create
                </button>
                <button
                    type="button"
                    data-request="onTestsave"
                    data-request-data="close:1"
                    data-hotkey="ctrl+enter, cmd+enter"
                    data-load-indicator="Creating ..."
                    class="btn btn-default">
                    Create and Close
                </button>