JSFiddle - React, Tailwind, and code Playground

by elegantsolutions

HTML

<!-- Start header partial -->

<!DOCTYPE html>
<html>
<head>
	<title>Form Test</title>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css">

</head>

<body>

<div class="ui container">

	<form class="ui form new-form" action="#" method="get">
		<div class="ui form">
			<label>What fruits do you like?</label>
			<div>
				<div class="field">
					<div class="ui checkbox">
						<input type="checkbox" tabindex="0" name="fruits" value="apples">
						<label>apples</label>
					</div>
				</div>
				<div class="field">
					<div class="ui checkbox">
						<input type="checkbox" tabindex="0" name="fruits" value="bananas">
						<label>bananas</label>
					</div>
				</div>
				<div class="field">
					<div class="ui checkbox">
						<input type="checkbox" tabindex="0" name="fruits" value="pears">
						<label>pears</label>
					</div>
				</div>
			</div>
		</div>
	</form>

</div>

</body>
</html>