JSFiddle - React, Tailwind, and code Playground
by Vinay Pratap Singh Bhadauria
HTML
<div class="page" id="booking_columns">
<div class="seven-hundred">
<form class="booking_form">
<div class="form_header"><h5><span class="spacer">Tell us about you</span></h5></div>
<p class="form_tags form_left">First Name</p><p class="form_tags form_right">Last Name</p>
<input type="text" class="customSelect_first_name" name="first_name">
<input type="text" class="customSelect_last_name" name="last_name"><br />
<p class="form_tags form_left">Email Address</p><br />
<input type="text" class="customSelect_email" name="email"><br />
<p class="form_tags form_left">Phone Number</p><br />
<input type="text" class="customSelect_phone" name="phone">
<div class="form_footer"><h5><span class="spacer">Tell us about your home</span></h5></div>
CSS
#booking_columns
{
top:20px;
}
.seven-hundred
{
width:600px;
height:100%;
float:left;
}
.page
{
width:900px;
margin-left:auto;
margin-right:auto;
}
.form_header
{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border:0;
background-color:#EBEBEB;
height:50px;
width:580px;
margin-bottom:20px;
}
.form_footer
{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border:0;
background-color:#EBEBEB;
height:50px;
width:580px;
margin-top:100px;
}