JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Advanced Word Search Generator v08 – Rounded Highlight</title>
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; background: #f0f0f0; }
    .controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 20px; }
    .control-group { display: flex; flex-direction: column; gap: 5px; padding: 10px; background: white; border-radius: 5px; }
    /* New group for highlight buffer control */
    .buffer-group { display: flex; flex-direction: column; gap: 5px; padding: 10px; background: #eef; border-radius: 5px; }
    #exportContainer { display: flex; flex-direction: column; align-items: center; gap: 20px; margin: 20px 0; position: relative; }
    .grid { 
      display: grid; 
      gap: 0; 
      background: white; 
      position: relative; 
    }
    /* Each cell wrapper is positioned relative to gridContainer. */
    .cell-wrapper {
      position: relative;
      box-sizing: border-box;
      /* width and height set inline during rendering */
    }
    .cell {
      display: flex; 
      justify-content: center; 
      align-items: center; 
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }
    .error { color: red; margin: 10px 0; padding: 10px; border: 1px solid red; display: none; }
    .visible { display: block; }
    button { padding: 10px; margin: 5px 0; cursor: pointer; background: #4CAF50; color: white; border: none; border-radius: 4px; }
    button:hover { background: #45a049; }
    input, select { padding: 5px; border: 1px solid #ddd; border-radius: 4px; }
    .word-list-box { border: 2px solid #333; padding: 15px; border-radius: 8px; background: #f9f9f9; width: fit-content; }
    .word-list { display: grid; gap: 5px; margin-top: 10px; }
    .word-list-item { padding: 3px 0;...