JSFiddle - React, Tailwind, and code Playground

HTML

List Favourite<br>
		
		<table border=1>
			<th rowspan=3>Name</th>
			<tr>
			<th colspan=3>Favourite Fruits</th>
			<tr>
			<th>Banana</th>
			<th>Apple</th>
			<th>Mangoes</th>
			
			<tr>
			
			<td>John<input type="hidden" id="U0001"/></td>
			<td align="center">
				<input type="checkbox" name="fruits[]" value="Banana"/>
			</td>
			<td align="center">
				<input type="checkbox" name="fruits[]" value="Apple"/>
			</td>
			<td align="center">
				<input type="checkbox" name="fruits[]" value="Mangoes"/>
			</td>
			
			<tr>
			
			<td>Mark<input type="hidden" id="U0002"/></td>
			<td align="center">
				<input type="checkbox" name="fruits[]" value="Banana"/>
			</td>
			<td align="center">
				<input type="checkbox" name="fruits[]" value="Apple"/>
			</td>
			<td align="center">
				<input type="checkbox" name="fruits[]" value="Mangoes"/>
			</td>
			
			<tr>
			
			<td colspan=4>
				<input type="button" value="Submit" id="btnSubmit"/>
			</td>
		</table>