JSFiddle - React, Tailwind, and code Playground

HTML

<div id="toppanel"> 
	<div id="panel"> 
		<div class="content container clearfix"> 
			<div class="col-lg-8 col-md-8 col-sm-12"> 
				<div class="wpcf7" id="wpcf7-f291-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"></div>
<form name="" action="/#wpcf7-f291-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="291" />
<input type="hidden" name="_wpcf7_version" value="4.0.1" />
<input type="hidden" name="_wpcf7_locale" value="en_US" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f291-o1" />
<input type="hidden" name="_wpnonce" value="b35a2aa85e" />
</div>
<p><span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Your Name (required)" /></span></p>
<p><span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="Your Email (required)" /></span> </p>
<p><span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="Subject" /></span></p>
<p><span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Your Message"></textarea></span></p>
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div>			</div> 
			<div class="col-lg-4 col-md-4 col-sm-12">  
				<h2>Text</h2> 
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum lacus in placerat...

CSS

/*
Name: Sliding Login Panel with jQuery 1.3.2
Author: Jeremie Tisseau
Author URI: http://web-kreation.com/
Date: March 26, 2009
Version: 1.0
*/

/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}




/* Panel Tab/button */
.tab {
  	background: url(../images/tab_b.png) repeat-x 0 0;
	  position: relative;
    top: 0;
    left:0;
    z-index: 999;
}

.tab .sep {color:#414141}

a#close {
    background-image:url(/skin/frontend/default/default/images/close-panel-n.png);
    display:block;
    height:26px;
    text-indent:-9999px;
    width:85px;
    position:relative;
    z-index:4;
    float:left;
    margin-top:30px;
    margin-left:160px;
    margin-top:50px
} 
a#close:hover {
    background-image:url(/skin/frontend/default/default/images/close-panel-r.png);
}

/* sliding panel */
/* see head.phtml for #toppanel declaration */

#toppanel {
    position: absolute;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#panel {
	width: 100%;
	height: 420px;
	color: #fff;
	background: #C6252C;
	overflow: hidden;
	position: relative;
	z-index: 1001;
	display:none;
	padding-top:35px;
}

#panel form {padding-top:20px}

.open {float: left;position: relative;}

@media (max-width: 767px) {
.nav>li { width: 97%; }
}

JavaScript

$(document).ready(function() {
	
	// Expand Panel
	$("#open").click(function(){
		$("div#panel").slideDown("slow");	
	});		
	
	// Switch visiblility of the "Close Panel" button
	$("#close").click(function () {
   		$("div#panel").slideUp("slow");	
	});
		
	});