JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mb-4">
    <label for="fullName"></label>
    <input class="border-b border-color-brown shadow appearance-none w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none my-3" id="fullName" type="text" placeholder="Full Name" onKeyUp="sendEmail()">
    <label for="subject"></label>
    <input class="border-b border-color-brown shadow appearance-none w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none my-3" id="subject" type="text" placeholder="Subject"  onKeyUp="sendEmail()">
    <label for="comment"></label>
    <textarea id="comment" class="border-b border-color-brown shadow appearance-none focus:outline-none w-full py-2 px-3 text-gray-700 leading-tight py-2 my-3" placeholder="Comment"  onKeyUp="sendEmail()"></textarea>
  </div>
  <div class="flex justify-center">
  <a href="" id="send_email"><button class="bg-color-brown hover:bg-color-light-brown text-white font-bold py-2 px-4 rounded text-color-black-brown" href="">Send Email</button></a>
  </div>

JavaScript

function sendEmail() {
		var link = document.getElementById('send_email');
    var name = document.getElementById('fullName').value;
    var subject = document.getElementById('subject').value;
    var message = "Hello my name is " + name + " -- " + document.getElementById('comment').value;
    var email = "you@yourdomain.com";
    var href = "mailto:" + email + "?subject=" + subject + "&body=" + message;
    console.log(href);
    link.setAttribute("href", href);
}