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>TopMenu Demo with Updated Styling</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      background: #f4f7fa;
    }
    #canvas {
      width: 100%;
      height: calc(100vh - 32px);
      background: #ffffff;
      border-top: 1px solid #d0d7de;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    }
    #sidebar, #propertypanel, #toolbar, #statusbar {
      display: none;
      position: fixed;
      background: #e6edf3;
      padding: 12px;
      border: 1px solid #d0d7de;
      border-radius: 6px;
    }
    #sidebar {
      left: 8px;
      top: 40px;
      height: calc(100vh - 48px);
      width: 220px;
    }
    #propertypanel {
      right: 8px;
      top: 40px;
      height: calc(100vh - 48px);
      width: 220px;
    }
    #toolbar {
      top: 40px;
      left: 50%;
      transform: translateX(-50%);
      width: 320px;
      height: 48px;
    }
    #statusbar {
      bottom: 8px;
      width: calc(100% - 16px);
      height: 36px;
      left: 8px;
    }
  </style>
</head>
<body>
  <div id="canvas"></div>
  <div id="sidebar">Sidebar</div>
  <div id="propertypanel">Property Panel</div>
  <div id="toolbar">Toolbar</div>
  <div id="statusbar">Status Bar</div>

  <script>
    // Updated TopMenu class with redesigned CSS
    class TopMenu {
      static cssInjected = false;
      static instances = new Set();

      constructor({ canvasManager, grid, layers, options = {} }) {
        if (!canvasManager || !grid || !layers) {
          throw new Error('Missing required dependencies: canvasManager, grid, or layers');
        }

        this.canvas = canvasManager;
        this.grid = grid;
        this.layers = layers;

        this.options = {
         ...