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>
<div class="select">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</div>
<input type="submit"/>
CSS
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
label {
display:inline;
font-style:italic;
width:15%;
font-size:110%;
margin-right:5px;
display:inline-block;
float:left;
text-align:right;
padding-right:3px;
}
div {
width:100%;
padding: 4px 5px;
border-bottom:1px solid #e5e5e5;
}
input, textarea, select {
border:1px solid #888 ;
box-shadow: inset 1px 2px 0px #e3e3e3 ;
padding:2px ;
border-radius:7px;
}
input[type="text"] {
width:84%;
display:inline-block;
}
input[type="radio"] {
margin-right:10px;
}
input[type="checkbox"] {
margin:0 4px;
}
.checkHolder {
border:none;
margin:0;
padding:0;
}
.options label {
font-style:normal;
float:none;
width:auto;
}
.select select {
width:120%;
background: none;
box-shadow:none;
border:none;
padding:0;
}
.select {
border:none;
width:84%;
background: red;
display: inline-block;
overflow:hidden;
padding:0;
margin:0;
}
input[type="submit"] {
border-radius:7px;
border:1px solid #555;
background: #666;
padding:5px 10px;
box-shadow: inset 1px 2px 3px #999 ;
font-weight:bold;
}