JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.min.css">
<div class="container">
	<div class="page-header">
		<h2>Add Student</h2>
	</div>
	<div class="row">
		<div class="col-sm-5">
			<form class="form-horizontal">
				<div class="form-group">
					<label class="col-sm-4 control-label">Full name</label>
					<div class="col-sm-8">
						<input type="text" class="form-control" placeholder="Full name">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-4 control-label">Gender</label>
					<div class="col-sm-8">
						<div class="radio">
							<label>
								<input type="radio" value="female">
								Female
							</label>
						</div>
						<div class="radio">
							<label>
								<input type="radio" value="male">
								Male
							</label>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-4 control-label">Date of birth</label>
					<div class="col-sm-8">
						<input type="date" class="form-control">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-4 control-label">University</label>
					<div class="col-sm-8">
						<select class="form-control">
							<option value="0" selected disabled>Please select</option>
							<option value="cairo">Cairo</option>
							<option value="ain-shams">Ain-Shams</option>
							<option value="helwan">Helwan</option>
						</select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-4 control-label">Faculty</label>
					<div class="col-sm-8">
						<select class="form-control">
							<option value="0" selected disabled>Please select</option>
							<option value="engineering">Engineering</option>
							<option value="medicine">Medicin</option>
							<option value="arts">Arts</option>
             </select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-4 control-label">Email</label>
					<div class="col-sm-8">
						<input type="email"...

CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}