JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contact_form">
    <form name="contact" method="post" action="">
        
        <input type="text" name="name" id="name" size="30" value="Name" class="text-input" />
        <label class="error" for="name" id="name_error">Please enter your name.</label>
        <br />
        
        <input type="text" name="email" id="email" size="30" value="" class="text-input" />
        <label class="error" for="email" id="email_error">I need your email.</label>
        <br />
        
        <textarea rows="10" cols="30" type="textarea" name="message" id="message" value="Message" class="text-input" ></textarea>
        <label class="error" for="message" id="message_error">A message is required.</label>
        
        <br />
        <input type="submit" name="submit" class="button" id="submit" value="Send" />
        
    </form>
</div>
<br>
<div id="mail_list">
    <input type="text" id="mail" value="" name="mail_list" /><input type="submit" name="submit" class="button" id="submit" value="Send" />
</div>

JavaScript

var $mail = $("#mail");

$("#email").keyup(function() {
    $mail.val(this.value);
});
$("#email").blur(function() {
    $mail.val(this.value);
});