JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reflected XSS Demo</title>
  </head>

  <body>
    <h1>Welcome to the XSS Demo</h1>
    <form id="nameForm">
      <label for="name">Enter your name:</label>
      <input type="text" id="name" name="name">
      <button type="submit">Submit</button>
    </form>

    <div id="greeting"></div>


  </body>

</html>

CSS

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

form {
  margin-bottom: 20px;
}

#greeting {
  font-size: 24px;
  color: blue;
}

JavaScript

document.getElementById('nameForm').onsubmit = function(event) {
    event.preventDefault(); // Prevent form submission and page reload

    const name = document.getElementById('name').value;

    // Vulnerable to XSS attack
    document.getElementById('greeting').innerHTML = `Hello, ${name}!`;
};