JSFiddle - React, Tailwind, and code Playground

HTML

<script>
function bookingToggle() {
	$(".mainFastOptionBookPanel").slideToggle("slow");
}
function feedToggle() {
	$(".mainFastOptionFeedPanel").slideToggle("slow");
};
function contactToggle() {
	$(".mainFastOptionContactPanel").slideToggle("slow");
};
</script>
<div class="mainContentContainer">
<div class="mainFastOption">
    	<div class="mainFastOptionBook">
        	<div class="mainFastOptionBookTitle" onclick="bookingToggle()">Book Lessons Now</div>
        	<div class="mainFastOptionBookPanel">
            	<input type="text" placeholder="First Name" /><br />
            	<input type="text" placeholder="Last Name" /><br />
            	<input type="number" placeholder="Phone Number" /><br />
            	<input type="email" placeholder="E-Mail Address" /><br />
                <button>Send Booking Details</button>
            </div>
        </div>
    	<div class="mainFastOptionFeed">
        	<div class="mainFastOptionFeedTitle" onclick="feedToggle()">View Our Feed</div>
        	<div class="mainFastOptionFeedPanel">Facebook Feed...</div>
        </div>
    	<div class="mainFastOptionContact">
        	<div class="mainFastOptionContactTitle" onclick="contactToggle()">Got a Question?</div>
        	<div class="mainFastOptionContactPanel">
            	<input type="text" placeholder="Full Name" /><br />
            	<input type="email" placeholder="E-Mail Address" /><br />
            	<input type="text" placeholder="Subject" /><br />
            	<textarea placeholder="Enter your message here..."></textarea><br />
                <button>Send Message</button>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="mainContent">
        <div class="mainText">
            <p>Welcome to Wirral Motoring School</p>
        </div>
    </div>
</div>

CSS

.clear {
    clear: both;
}
.mainContentContainer {
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 50px;
}
.mainFastOption {
	height: auto;
	margin-bottom: 15px;
	text-shadow: 0px 1px 2px #000;
	float: none;
}
.mainFastOptionBook {
	width: 310px;
	float: left;
	margin-right: 10px;
}
.mainFastOptionBookTitle {
	height: 70px;
	line-height: 70px;
	text-align: center; /* Old browsers */
	color: #FFF;
	box-shadow: 0px 0px 3px 0px #000;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
	background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
	background-color:#fe1a00;
	border-radius: 5px;
	transition: box-shadow 0.2s ease-out;
}
.mainFastOptionBookTitle:hover {
	cursor: pointer;
	box-shadow: 0px 0px 10px 0px #000;
	transition: box-shadow 0.2s ease-in;
}
.mainFastOptionBookPanel {
	text-align: center;
	display: none;
	background-color: #FFF;
	padding-top: 5px;
	padding-bottom: 5px;
	box-shadow: 0px 0px 3px 0px #000;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}
.mainFastOption email, textarea, input  {
	width: 90%;
	border: solid 1px #ccc;
	padding: 5px;
	margin: 5px 0px;
	transition: border 0.2s ease-out;
	resize: vertical;
	max-height: 150px;
}
.mainFastOption email, textarea, input:focus {
	border: solid 1px #333;
	transition: border 0.2s ease-in;
}
.mainFastOption button {
	-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
	box-shadow:inset 0px 1px 0px 0px #f29c93;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100)...