JSFiddle - React, Tailwind, and code Playground
HTML
<section class="signup">
<h1>Keep up to date.</h1>
<p>Sign up to our newsletter to hear about improvements and additions to Electric Dreams.</p>
<form class="newsletterForm">
<label for="name" class="label">Full Name</label>
<input type="text" id="name" name="name" class="input" placeholder="Full Name"> <br>
<label for="email" class="label">Email Address</label>
<input type="email" id="email" name="email" class="inout" placeholder="Email Address"> <br>
<button type="submit" class="btn" onclick="submitNewsletter()">Submit</button>
</form>
</section>
JavaScript
function submitNewsletter(e) {
e.preventDefault();
var name = document.getElementById("name");
var email = document.getElementById("email");
if (name.value === "" || email.value === "" || !name.value || !email.value) {
alert("Please fill in your details.");
return false;
}
}
document.querySelector(".newsletterForm")
.addEventListener('submit', submitNewsletter);