JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Maze Generator open Green v01</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 {
      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>
</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 value="6">Level 6</option>
        <option value="7">Level 7 (hardest)</option>
      </select>
    </label>
    <label>Algorithm:
      <select id="algorithm">
        <option value="recursiveBacktracker">Recursive Backtracking</option>
        <option value="prims">Prim's Algorithm</option>
        <option value="kruskals">Kruskal's Algorithm</option>
        <option...