JSFiddle - React, Tailwind, and code Playground
HTML
<fieldset>
<legend>HTML 4.1 Form Controls</legend>
<br/>
<ul>
<li>Input types (and fieldsets):
<br/>
<ul>
<form method="post" action="">
<fieldset>
<legend>This is a legend</legend>
<li>text
<input type="text" />
</li>
<li>password
<input type="password" />
</li>
<li>checkbox
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</li>
<li>radio
<input name="group1" type="radio" />
<input name="group1" type="radio" />
<input name="group1" type="radio" />
</li>
</fieldset>
<fieldset>
<legend>This is another legend</legend>
<br />
<li>file
<input type="file" />
</li>
<li>reset
<input type="reset" />
</li>
</fieldset>
</form>
<fieldset>
<legend>This fieldset isn't in a form... non-semantic ftw!</legend>
<li>submit
<input type="submit" />
</li>
<li>hidden
<input type="hidden" />
</li>
<li>image
<input type="image" />
</li>
<li>button
...
CSS
textarea {
max-width: 500px;
min-height:20px;
}
li {
margin-left: 15px;
}