JSFiddle - React, Tailwind, and code Playground

HTML

<form id="myForm" name="myForm" action="/" onsubmit="test()">

<div class="botLayout">
<div name="title" align="left" style="font-size: 13px;">
<font size="4"><b>
REGISTER NOW
</b></font>
</div>
<div name="indic" align="right" style="font-size: 13px;">
<font size="1">
<font color="#ff0000">*</font>Required field
</font>
</div>
<b style="font-weight: bold;">
<div>
<div>
<div>
<b style="font-size: 13px;">First Name</b><b>
<div style="display: inline !important;">
<div style="display: inline !important;">
<span style="color: #ff0000; font-weight: normal; text-align: -webkit-right;"><font size="2">*</font></span>
</div>
</div>
</b>
</div>
<div style="font-size: 13px;">
<input type="text" maxlength="50" name="FirstName" id="FirstName" value="%%first name%%" size="19" />
</div>
</div>
<div>
<div>
<b style="font-size: 13px;">Last Name</b><b>
<div style="display: inline !important;">
<div style="display: inline !important;">
<span style="color: #ff0000; font-weight: normal; text-align: -webkit-right;"><font size="2">*</font></span>
</div>
</div>
</b>
</div>
<div style="font-size: 13px;">
<input type="text" maxlength="50" name="LastName" id="LastName" value="" size="19" />
</div>
</div>
<div>
<div>
<b style="font-size: 13px;">Email</b><b>
<div style="display: inline !important;">
<div style="display: inline !important;">
<span style="color: #ff0000; font-weight: normal; text-align: -webkit-right;"><font size="2">*</font></span>
</div>
</div>
</b>
</div>
<div style="font-size: 13px;">
<input type="text" maxlength="254" name="Email" id="Email" value="" size="19" />
</div>
</div>
<div>
<div>
<b style="font-size: 13px;">Company</b><b>
<div style="display: inline !important;">
<div style="display: inline !important;">
<span style="color: #ff0000; font-weight: normal; text-align: -webkit-right;"><font size="2">*</font></span>
</div>
</div>
</b>
</div>
<div style="font-size: 13px;">
<input type="text" maxlength="50" name="Company" id="Company" value="" size="19"...

CSS

.botLayout{
padding-right:130px;
margin-right:20px;
}

JavaScript

function test()
{
    event.preventDefault();
    console.log(document.getElementById('FirstName').value);
    var a=document.getElementById("FirstName").value;
var b=document.getElementById("LastName").value;
var c=document.getElementById("Email").value;
var d=document.getElementById("Company").value;
var e=document.getElementById("JobTitle").value;
if(1===1){
alert(a);
alert(b);
return false; 
}
}