JSFiddle - React, Tailwind, and code Playground

by santosh joshi

HTML

<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<div class="modal fade" id="addactivity" tabindex="-1" role="dialog"
	aria-hidden="true" style="display: none; width: 600px">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h3>add an activity</h3>
			</div>
			<div class="modal-body activity">
				<form id="useractivityform" name="useractivityform" action="/"
					method="post">
					<div id="form-section">
						<div>
							<label class="left-column"> <span class="activity">select
									your experience level</span><br /> <input id="novice"
								class="activitylevel" name="activitylevel" type="radio" /><label>Novice</label>
								<br /> <input id="intermediate" class="activitylevel"
								name="activitylevel" type="radio" /><label>Intermediate</label><br />
								<input id="expert" class="activitylevel" name="activitylevel"
								type="radio" /><label>Expert</label><br />
							</label>
						</div>
					</div>
				</form>
			</div>
	  <div class="modal-footer">
		<button class="btn btn-primary pull-left" id="add-activity">Save</button>
		<button class="btn btn-warning pull-left" id="cancel-add-activity">Cancel</button>
	</div>
		</div>
	</div>
</div>

<a data-toggle="modal" href="#addactivity"
	class="btn btn-primary btn-lg">add an activity</a>

JavaScript

$("#cancel-add-activity").click( function() {
			$('#addactivity').modal('hide')
		});

$("#add-activity").click( function() {
			$('#addactivity').modal('hide')
		});