JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Maze Generator open Green v02</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #controls {
      padding: 10px;
      background: #f2f2f2;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
    }
    #controls input, #controls select, #controls button, #controls label {
      font-size: 14px;
      padding: 5px;
    }
    #mazeContainer {
      margin: 10px;
      border: 1px solid #ccc;
    }
    svg {
      /* On-screen: show a faint grid */
      background-color: #fff;
    }
    .grid-line {
      stroke: #ddd;
      stroke-width: 1;
    }
    .maze-wall {
      stroke: #000;
      stroke-width: 4;
      fill: none;
      /* Rounded corners where lines meet */
      stroke-linejoin: round;
    }
    .start-marker, .end-marker {
      fill: red;
      stroke: none;
    }
    .end-marker {
      fill: green;
    }
    /* Style for the solution overlay */
    .solution-path {
      fill: none;
      stroke: rgba(0, 0, 255, 0.5);
      stroke-width: 6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    /* Style for the hint corridors ("Hint Pathways") */
    .hint-tunnel {
      stroke: grey;
      stroke-width: 4;
      stroke-linecap: round;
    }
  </style>
</head>
<body>
  <div id="controls">
    <label>Width: <input id="mazeWidth" type="number" value="20" min="5" max="100"></label>
    <label>Height: <input id="mazeHeight" type="number" value="20" min="5" max="100"></label>
    <label>Difficulty:
      <select id="difficulty">
        <option value="1">Level 1 (easiest)</option>
        <option value="2">Level 2</option>
        <option value="3">Level 3</option>
        <option value="4">Level 4</option>
        <option value="5">Level 5</option>
        <option...