JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Interactive Property Panel</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 20px; }
    #app { width: 600px; height: 400px; position: relative; background: #f5f5f5; border: 1px solid #ddd; overflow: hidden; }
    #canvas { width: 100%; height: 100%; position: relative; }
    .element { position: absolute; cursor: grab; display: flex; align-items: center; justify-content: center; transition: box-shadow 0.2s; }
    .element:hover { opacity: 0.8; }
    .element.selected { box-shadow: 0 0 5px rgba(0,0,0,0.5); }
    input[type="color"] { width: 100%; height: 30px; border: none; padding: 0; }
  </style>



  <script>

  </script>

  
</head>
<body>
  <h2>Click a box to open the Property Panel</h2>
  <div id="app">
    <div id="canvas"></div>
  </div>

  <script>
    const propertyConfig = {
      x:       { group: 'Element',      type: 'number' },
      y:       { group: 'Element',      type: 'number' },
      type:    { group: 'Element',      type: 'text', readonly: true },
      title:   { group: 'Annotations',  type: 'text' },
      color:   { group: 'Appearance',   type: 'color' },
      opacity: { group: 'Appearance',   type: 'range', min: 0.1, max: 1, step: 0.1 },
      mode:    { group: 'Settings',     type: 'select', options: [
        { value: 'normal', label: 'Normal' },
        { value: 'advanced', label: 'Advanced' }
      ]},
      delay:   { group: 'Simulation', type: 'number' },
      speed:   { group: 'Simulation', type: 'range', min: 0, max: 100, step: 1 }
    };

    function generatePanelData(obj) {
      const data = {};
      Object.entries(obj).forEach(([key, value]) => {
        const cfg = propertyConfig[key] || { group: 'Settings', type: typeof value === 'number' ? 'number' : 'text' };
        const group = cfg.group;
        if (!data[group]) data[group] = [];
        const...

CSS

/* CSS */
#app {
  background: #f5f5f5;
}
.element:hover {
  opacity: 0.8;
}
.element.selected {
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
#log {
  max-height: 100px;
  overflow-y: auto;
  border: 1px solid #ddd;
  padding: 10px;
}