create form name email message send button with visual perfect design and interactions with html css js in javascript

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">Send</button>
</form>
321 chars
13 lines

/* Add your desired styling here */
form {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

label {
  margin-bottom: 5px;
}

input,
textarea {
  margin-bottom: 10px;
  padding: 5px;
}

button {
  padding: 10px 20px;
  background-color: #3f51b5;
  color: #fff;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #1a237e;
}
396 chars
31 lines

index.tsx
document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault();
  // Perform any validation or submission actions here
  
  // Example: Retrieve form values
  const formData = new FormData(event.target);
  const name = formData.get("name");
  const email = formData.get("email");
  const message = formData.get("message");

  // Example: Output values to console
  console.log("Name:", name);
  console.log("Email:", email);
  console.log("Message:", message);

  // Clear form fields
  event.target.reset();
});
554 chars
19 lines