JSFiddle - React, Tailwind, and code Playground
HTML
<form novalidate="novalidate" class="wpcf7-form" method="post" action="/projects/redwood-backend/#wpcf7-f185-o1">
<div style="display: none;">
<input type="hidden" value="185" name="_wpcf7">
<input type="hidden" value="4.3.1" name="_wpcf7_version">
<input type="hidden" value="en_US" name="_wpcf7_locale">
<input type="hidden" value="wpcf7-f185-o1" name="_wpcf7_unit_tag">
<input type="hidden" value="ab9e21d00e" name="_wpnonce">
</div>
<div class="footer-box col-sm-6">
<div class="footer-form col-sm-5">
<div class="form-group">
<span class="wpcf7-form-control-wrap text-357"><input type="text" aria-invalid="false" aria-required="true" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" size="40" value="" name="text-357"></span><br>
<label>Name</label>
</div>
</div>
<div class="footer-form col-sm-5">
<div class="form-group">
<span class="wpcf7-form-control-wrap email-715"><input type="email" aria-invalid="false" aria-required="true" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email form-control" size="40" value="" name="email-715"></span><br>
<label>EMAIL</label>
</div>
</div>
<div class="footer-form col-sm-10">
<div class="form-group">
<span class="wpcf7-form-control-wrap textarea-410"><textarea aria-invalid="false" aria-required="true" id="message" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required form-control" rows="10" cols="40" name="textarea-410"></textarea></span><br>
<label>MESSAGE</label>
</div>
</div>
<div class="footer-form col-sm-4">
<div class="form-group submitbtn">
<p><input type="submit" class="wpcf7-form-control wpcf7-submit form-control" value="SEND"><img class="ajax-loader" src="http://ecommercehouse.com/projects/redwood-backend/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden;"></p></div>
</div>
</div>
<div class="wpcf7-response-output wpcf7-display-none"></div></form>
CSS
body {background-color:#000;}
.form-group {position:relative;}
/*
Theme Name: Hussain Theme Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Hussain Theme Child Theme
Author: John Doe
Author URI: http://example.com
Template: hussaintheme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: hussaintheme-child
*/
@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700);
/**********gmk classes***********/
/*======== CONTENT ========*/
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
font-family:"roboto";
}
body{
overflow-x: hidden;
}
.hed-cntr .container > h2, .hed-cntr .container > p, .hed-cntr .container > .lnk-btn {
text-align: center;
}
.cr a {
color: #fff;
}
/*truncate string / limited text */
.hed-lmt h3,
.hed-lmt h4 {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cont-lmt p{
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*======== SPACING & ALIGNMENTS ========*/
/*for flat icons*/
body [class*="flaticon-"]::before {
margin: 0;
}
.pad0{ padding: 0;}
.pad-l0{ padding-left: 0;}
.pad-r0{ padding-right: 0;}
.martop30{ margin-top:30px; }
.marbot30{ margin-bottom:30px; }
.wide-dvr,
.dvr .container {
border-bottom: 1px solid #eee;
margin-bottom: 30px;
padding-bottom: 30px;
}
.pul-lft {
float: left;
}
.pul-rgt {
float: right;
}
.pul-cntr {
float: none;
margin: 0 auto;
}
.valign {
align-items: center;
display: flex;
min-height: 100px; /* define holder height */
}
/*========= IMG =========*/
.ovrflw { overflow:...
JavaScript
var cf7input = $( ".wpcf7-form-control" );
if ( cf7input.parent().is( "span" ) ) {
cf7input.unwrap();
} else {
cf7input.wrap( "<div></div>" );
}
jQuery('.form-group br').remove();
jQuery('.form-control').focusout(function(){
var text_value=jQuery(this).val();
if(text_value!='')
{
// alert(1);
jQuery(this).addClass("wariya");
}else{jQuery(this).removeClass("wariya");}
});