JSFiddle - React, Tailwind, and code Playground

HTML

<form name="hongkiat" id="hongkiat-form" method="post" action="enviar.php">
	
        <table border=1 id="form" style="padding:10px;">
	
                <tr>

                        <td align=left>
                                <input name="nombre" id="nombre" type="text" class="txtinput" placeholder="Nombre y apellido" autocomplete="off" jVal="{valid:function (val) { if (val.length < 3) return 'Nombre inv&aacute;lido'; else return ''; }}">
                        </td>
                        <td rowspan="3">
                          <textarea name="mensaje" id="mensaje" placeholder="Ingresa mensaje..."  autocomplete="off" tabindex="5" class="txtblock"></textarea>
                         </td>

                </tr>
                <tr>


                        <td align=left>
                                <input name="email" id="email" type=text  class="txtinput" placeholder="E-mail" autocomplete="off"  jVal="{valid:/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, message:'Email incorrecto'}"
                                        jValKey="{valid:/[a-zA-Z0-9._%+-@]/, cFunc:'alert', cArgs:['Email Address: '+$(this).val()]}">
                        </td>
                </tr>
                <tr>
                        <td align=left>
                                <input name="telefono" id="telefono" type=text maxlength=10    class="txtinput"  placeholder="Tel&eacute;fono"  autocomplete="off"    jVal="{valid:function (val) { if (val.length != 8) return false; else return true; }, message:'8 Digitos sin gui&oacute;n'}"
                                        jValKey="{valid:/[0-9]/, message:'&quot;%c&quot; Invalid Character - Only Digits Allowed', cFunc:'$(\'#formContainer\').jVal()'}">
                        </td>
                </tr>
                  
                  <tr>
                        <td colspan="2">
                                <input id="submitbtn" class="submitbtn" type=button value="Enviar" onClick="if (...

CSS

#form{
width:100%;
margin:0 5px ;
font-size: 0.7em; 
color: #ccc; 
background:red;
}



#hongkiat-form .txtinput{
border-style: solid;
border-width: 1px;
border-color: #dedede;
margin-bottom: 20px;
font-size: 1.55em;
padding: 11px 25px;
padding-left: 55px;
width: 30%;
color: #41649c;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; 
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
font-family: Abel-Regular, Arial, sans-serif;
font-weight:bold;
}

#hongkiat-form .txtinput:focus { 
color: #333;
border-color: #f5e5d5;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(8, 117, 166, 0.75);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(8, 117, 166, 0.75);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(8, 117, 166, 0.75);
}




#form input#nombre {
background:#fff;
height:30px;
float:left;
}


#hongkiat-form input#email {
background:#fff;
height:30px;
float:left;
}

#hongkiat-form input#telefono {
background:#fff;
height:30px;
float:left;
}

#hongkiat-form textarea {
display: block;
font-family: Abel-Regular, Arial, sans-serif;
border-style: solid;
border-width: 1px;
border-color: #dedede;
margin-bottom: 15px;
font-size: 1.7em;
padding: 11px 25px;
padding-left: 55px;
width: 30%;
height: 180px;
color:#41649c;
font-weight:bold;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; 
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s...