JSFiddle - React, Tailwind, and code Playground

by qolami

HTML

<body>
		<div id="container">
			<div id="header"> </div> <!--header-->
			<div id="content"> 
				<div id="searchForm">
					<form method="" action="post">
						<div>
							<label for="keywords"> Keywords </label>
							<input type="text" name="keywords">
						</div>
						
						<div>
							<label for="location"> Location </label>
							<input type="text" name="location">
						</div>
						
						<div>
							<label for="job_category"> Job Category </label>
							<input type="text" name="job_category">
						</div>
						
						<div>
							<label for="experience"> Experience </label>
							<input type="text" name="job_category">
						</div>
						
						<div>
							<label for="experience"> Salary Expectation </label>
							<select name="min_exp">  
								<option value=""> Min </option>
							</select>
							
							<select name="max_exp">  
								<option value=""> Max </option>
							</select>
						</div>
					</form>
				</div> <!--searchForm-->
			</div> <!--content-->
			<div id="footer"> </div> <!--footer-->
		</div>
	</body>

CSS

* {
margin: 0;
padding: 0;
  }


 #body {
background-color: #FFFFFF;
text-align: center;
}


#container {
margin: 0 auto;
width: 96%;
}


#header {
width: 100%;
height: 100px;
border: 1px solid #CCCCCC;
}


  #content {
border: 1px solid #F7F7F7;

  }


#searchForm {
   width: 100%;
   text-align: center;
   background-color: red;
   overflow:hidden;
   margin: 0 auto;
}


#searchForm div {
background-color: green;
    display: inline-block;
text-align:center;
margin-left:5px;
}

 #searchForm label {
display: block; 
 }



 #footer {
width: 100%;
height: 60px;
border: 1px solid #CCCCCC;
 }