JSFiddle - React, Tailwind, and code Playground

by Balkanlii

HTML

<form id="subForm" class="js-cm-form" action="https://www.createsend.com/t/subscribeerror?description=" method="post" data-id="92D4C54F0FEC16E5ADC2B1904DE9ED1A2B85BD51CC705D3DBA3380C45B55A12A0F495F8ADCB16BCD2791D07A3BB47115DDEE438690AD4CD48654BFAA9999999F">	
<h3>Receive<br>Company Updates</h3><br>
<label><b>(<span class="ccbnRequired">*</span>) Required fields</b></label><br>
    <label for="fieldEmail">Email<span class="ccbnRequired">*</span></label>
    <input id="fieldEmail" name="cm-wuihly-wuihly" type="email" class="js-cm-email-input" placeholder="Email" size="40" style="width: 320px;" required />
    <label for="fieldConfirmEmail">Confirm Email<span class="ccbnRequired">*</span></label>
    <input id="fieldConfirmEmail" name="confirmEmail" type="email" placeholder="Confirm Email"  size="40" style="width: 320px;" oninput="checkform(this)" required />
    <label for="fieldwxdtd">Name<span class="ccbnRequired">*</span></label>
    <input id="fieldwxdtd" name="cm-f-wxdtd" type="text" class="js-cm-email-input" placeholder="First name" style="width: 320px;" required /> <br>
	<input id="fieldwxdjk" label="lnamelbl" name="cm-f-wxdjk" type="text" class="js-cm-email-input" placeholder="Last name" style="width: 320px;" required />
    <label for="fieldwpthi">Company</label>
    <input id="fieldwpthi" name="cm-f-wpthi" type="text" placeholder="Company" size="40" style="width: 320px;"/> <br><br>
	    <button id="submitbutton" class="js-cm-submit-button" type="submit" >Subscribe</button><br><br>
<p>New subscriptions will be sent a confirmation email. Please follow instructions to complete your subscription.</p>
</form>
<script type="text/javascript" src="https://js.createsend1.com/javascript/copypastesubscribeformlogic.js"></script>

CSS

label{ display: block; font-size: 14px; line-height: 20px; color: #333333; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; font-weight: bold; }
	input {font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 20px; padding: 2px;}
	input::placeholder{color: gray; }
	button {border: lighter 1px; border-width: thin;}

JavaScript

var email = document.getElementById("fieldEmail"), confirm_email = document.getElementById("fieldConfirmEmail");
	function validateEmail(){
	  if(email.value != confirm_email.value) {confirm_email.setCustomValidity("Emails Don't Match");} 
 else {confirm_email.setCustomValidity('');}}
          email.onchange = validateEmail;
	confirm_email.onkeyup = validateEmail;