JSFiddle - React, Tailwind, and code Playground

by Tom Mount

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<a data-toggle="modal" href="http://jsfiddle.net/TbXgX/3/show/" data-target="#modal-calc">Click here</a>
<br />
<a data-toggle="modal" href="#" data-remote="http://jsfiddle.net/TbXgX/3/show/" data-target="#modal-calc">or here</a>
<br />
<a data-toggle="modal" href="#thisworks">This works, though.</a>

<div id="thisworks" class="modal fade" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title">Add New Designation</h4>
			</div>
			<div class="modal-body">
				<form>
					<fieldset>
						<div class="form-group">
							<label for="add-designation">Designation Description:</label>
							<input type="text" name="add-designation" id="add-designation" class="form-control" />
						</div>
					</fieldset>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" id="resetdesignation">Reset</button>
				<button type="button" class="btn btn-primary" id="adddesignation">Add Designation</button>
			</div>
		</div>
	</div>
</div>