JSFiddle - React, Tailwind, and code Playground
HTML
<div class="workorder-form">
<form class="workorder-form">
<h4>@Resources.WorkReport</h4>
<label>some label</label>
<input type="text" name="orderNumber" value="" />
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br />
<label>some label</label>
<input type="text" name="phone" value="" />
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br />
<label>some label</label>
<input type="text" name="email" value="" />
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br />
<label>some label</label>
<input type="text" name="email" value="" />
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br />
<label>some label</label>
<input type="text" name="email" value="" />
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br />
<label>some label</label>
<input type="text" name="email" value="" />
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br />
<label>some label</label>
<textarea name="email" value=""></textarea><br />
</form>
</div>
CSS
/*Custom form*/
.workorder-form {
margin-bottom:5px;
}
.workorder-form form {
margin-top: 15px;
width: 500px;
}
.workorder-form label{
margin-top:5px;
}
.workorder-form input[type=text] {
float:right;
}
.workorder-form input[type=checkbox]{
background-color:yellow;
}
.workorder-form textarea{
width:350px;
height:200px;
padding-bottom:5px;
}