JSFiddle - React, Tailwind, and code Playground

by Manawe

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script src="https://d3js.org/d3.v5.js"></script>
<link rel="stylesheet" type="text/css" href="./styles.css">

<div id="Maps">
  <canvas id="groundTilesCanvas" width="5400" height="3000"></canvas>
  <svg id="demo_svg" width="5400" height="3000">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
  <canvas id="effects" width="5400" height="3000"></canvas>
  <canvas id="temporary" width="5400" height="3000"></canvas>
  <canvas id="topTilesCanvas" width="5400" height="3000"></canvas>

</div>


<select id="v_dropdown" @change="onChange()" v-model="selected">
    <option v-for="option in options" v-bind:value="option">
        {{ option }}
    </option>
</select>


<!-- app -->
<div id="options">
  <button id="show-modal" @click="showModal = true">Show Controlls</button>
  <!-- use the modal component, pass in the prop -->
  <modal v-if="showModal" @close="showModal = false">
    <!--
        you can use custom content here to overwrite
        default content
      -->
  </modal>
</div>



<!-- template for the axis label component. -->
<script type="text/x-template" id="axis-label-template">
  <text :x="point.x" :y="point.y">{{stat.label}}</text>
</script>




<script type="text/x-template" id="modal-template">
  <transition name="modal">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">

          <div class="modal-header">
            <slot name="header">
              <h4>Map Rendering Options</h4>
            </slot>
          </div>

          <!-- 
          title: "Ground Overlay",
          drawEnabled: true,
          checkboxName: "Draw Lines",

          strokeEnabled: true,
          strokeColourBoxName: "Select stroke colour",
          strokeSlider: { label: 'Stroke Width', value: 1, range: { min: 0,...