JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<div class="page-header">
	<h1>System Time Settings</h1>
</div>

<div class="page-body">

	<form class="form-horizontal">
		<p class="section-title">Time zone</p>
		<div class="section-body">
			<div class="form-group form-group-sm">
				<label class="col-sm-2 control-label">Time zone</label>
				<div class="col-sm-2">
					<select class="form-control input-sm">
						<option>GMT</option>
						<option>GMT+1:00</option>
						<option>Manual Setting</option>
					</select>
				</div>				
			</div>
			<div class="form-group form-group-sm">
				<label class="col-sm-2 control-label">Manual TimeZone (POSIX 1003.1)</label>
				<div class="col-sm-2">
					<input type="text" class="form-control" disabled>
				</div>
			</div>
			<div class="checkbox">
				<label>
				<input type="checkbox" value="">Enable daylight saving time
				</label>
			</div>			
		</div>
		<p class="section-title">Date and Time</p>
		
		<div class="section-body">
			<div class="radio">
				<label>
				<input type="radio" name="optionsRadios" value="option1">Keep current date and time
				</label>
			</div>
			<div class="radio">
				<label>
				<input type="radio" name="optionsRadios" value="option2">Sync with computer time
				</label>
			</div>
			<div class="sub-section">
				<div class="form-group form-group-sm">
					<label class="col-sm-2 control-label">PC date</label>
					<div class="col-sm-1">
						<input type="text" class="form-control" value="2015/04/10" disabled>
					</div>
					<label class="col-sm-1 control-label">[yyyy/mm/dd]</label>
				</div>
				<div class="form-group form-group-sm">
					<label class="col-sm-2 control-label">PC time</label>
					<div class="col-sm-1">
						<input type="text" class="form-control" value="09:22:40" disabled>
					</div>
					<label class="col-sm-2 control-label">[hh:mm:ss]</label>
				</div>
			</div>
			<div class="radio">
				<label>
				<input type="radio" name="optionsRadios"value="option3">Manual
				</label>
			</div>
			<div...

JavaScript

<div class="page-header">
	<h1>Account Privileges</h1>
</div>

<div class="page-body">

	<form class="form-horizontal">
		
		<!--p class="section-title">Enable/Disable Authentication</p-->		
		<div class="section-body">
			<div class="checkbox">
			  <label>
				<input type="checkbox" value="">
				Enable Authentication
			  </label>
			</div>
		</div>
	

		<p class="section-title">Admin Password</p>
		<div class="section-body">
			<div class="form-group form-group-sm">
				<label class="col-sm-2 control-label">Admin Password</label>
				<div class="col-sm-2">
					<input type="password" class="form-control" placeholder="Admin Password">
				</div>
			</div>
			<div class="form-group form-group-sm">
				<label class="col-sm-2 control-label">Confirm Password</label>
				<div class="col-sm-2">
					<input type="password" class="form-control" placeholder="Confirm Password">
				</div>				
			</div>
			<P class="help-block">Note: Admin password must be either blank, or from 8 to 32 characters.</P>
		</div>

	

		<p class="section-title">User Privileges</p>
		<div class="section-body">

			<table class="table-form table-hover">
					<thead>
						<tr>
							<th>No.</th>
							<th>Enable</th>
							<th>User Name</th>
							<th>Password</th>
							<th>Security Level</th>
							<th>Privileges</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td><input type="checkbox"></td>
							<td class="input-element"><input type="text" class="form-control input-sm" placeholder="User Name"></td>
							<td class="input-element"><input type="password" class="form-control input-sm" placeholder="Password"></td>
							<td class="input-element">
								<select class="form-control input-sm">
									<option>User</option>
									<option>Administrator</option>
									<option>Operator</option>
								</select>
							</td>
							<td>
								<label class="checkbox-inline"><input type="checkbox">Control Camera</label>
								<label...