JSFiddle - React, Tailwind, and code Playground

by Donna Torr

HTML

<section id="gkBottom6">
    	<div class="gkCols6 gkPage">
    		<div class="box  gkmod-1 nomargin"><div class="content">

<div class="custom">

	<div id="container">

	<div id="hdr-lay">
	Header
	</div>

	<div id="left-column">
<h3>Contact Form</h3>
	<script src="https://www.google.com/recaptcha/api.js?hl=en-GB&amp;onload=onloadCallback&amp;render=explicit"></script><script>var onloadCallback = function() {grecaptcha.render("dynamic_recaptcha_1", {sitekey: "6Lfrwh0TAAAAAA8_MvrQTQTmy2cAuBa0bT9CA332", theme: "light"});}</script><div class="gkContactForm"><form action="http://www.sitewidedesign.co.uk/dev/" method="post"><p class="gkcontact-fields"><input type="email" class="required" placeholder="e-mail" name="gkcontact-email" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==&quot;); background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; background-repeat: no-repeat;"><input type="text" class="required" placeholder="Name" name="gkcontact-name"><input type="text" class="required" placeholder="Message title" name="gkcontact-title"></p><p class="gkcontact-textarea"><textarea class="required" name="gkcontact-textarea" placeholder="Your message"></textarea></p><div id="dynamic_recaptcha_1"><div><div style="width: 304px; height: 78px;"><iframe src="https://www.google.com/recaptcha/api2/anchor?k=6Lfrwh0TAAAAAA8_MvrQTQTmy2cAuBa0bT9CA332&amp;co=aHR0cDovL3d3dy5zaXRld2lkZWRlc2lnbi5jby51azo4MA..&amp;hl=en-GB&amp;v=r20160419151547&amp;theme=light&amp;size=normal&amp;cb=p8t3qar4ul0g"...

CSS

/*custom css*/
#gkBottom6 {
	background-color:#4c90fe;	
}
#hdr-lay {
	background-color: #4c90fe;
}

#container {
    background-color: #4c90fe;
	height:100%;
	width:100%;
}


#left-column {
	float: left;
    background-color: #4c90fe;
	border: 1px;
	width: 65%;
    height:inherit;
	
}
#right-column {
    float: left;
	width: 35%;
    background-color: #4c90fe;
	display: block;
    height:inherit;
	color:#fff;
}
#left-column > h3 {
	color:#fff;
}
#right-column > h3 {
	color:#fff;
}

/*Button Styling on contact form*/
.gkContactForm .button-border {
	background: #fff;
	border: 2px solid #fff;
	color: #4c90fe;
	float: right;
	height: 50px;
	line-height: 47px;
	margin: 18px 0 0 0;
	padding: 0 32px;
	width: auto!important;
	clear:both;
}
.gkContactForm .button-border:active,
.gkContactForm .button-border:focus,
.gkContactForm .button-border:hover {
	background: #fec54d;
	border-color: #fec54d;
	color: #fff;
}
/*Input area*/
.gkContactForm p.gkcontact-fields {
	float: left;
	margin: 0 7% 0 0;
	width: 44%;
}
.gkContactForm p.gkcontact-textarea {
	float: right;
	margin: 0;
	width: 49%;
}
.gkContactForm input {
	border-color: #4c90fe;
	margin: 0 0 12px 0;
	width: 100%;
}
.gkContactForm textarea {
	border-color: #4c90fe;
	height: 159px!important;
}
/*Recapcha*/
.gkContactForm #dynamic_recaptcha_1 {	
	float: right;
	margin-top:12px;
}