JSFiddle - React, Tailwind, and code Playground
by Victor
HTML
<div>
<label for="thing">Labek</label>
<input type="text"/>
</div>
<div>
<label for="thing">Labek</label>
<div class="checkHolder">
<input type="checkbox" name="vehicle" value="Bike"/>I have a bike
<input type="checkbox" name="vehicle" value="Car"/>I have a car
</div>
</div>
<div>
<label for="thing">Labek</label>
<span class="options">
<input type="radio" name="sex" value="male"/><label for="">yay</label>
<input type="radio" name="sex" value="male"/><label for="">yay</label>
<input type="radio" name="sex" value="male"/><label for="">yay</label>
</span>
</div>
<div>
<label for="thing">Labek</label>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
CSS
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
label {
margin-right:20px;
display:inline;
font-style:italic;
width:30%;
display:inline-block;
}
div {
width:100%;
padding: 4px 5px;
border-bottom:1px solid #e5e5e5;
}
input, textarea, select {
border:1px solid #999 ;
box-shadow: inset 0px 1px 2px #999 ;
padding:2px ;
border-radius:7px;
}
input[type="text"] {
width:70%;
}
input[type="radio"] {
margin-right:10px;
}
input[type="checkbox"] {
margin:0 4px;
}
.checkHolder {
background: red;
}
.options label {
font-style:normal;
}
select {
width:100px;
}