JSFiddle - React, Tailwind, and code Playground

by Wolf Wortmann

HTML

<input type="text" placeholder="Words">
<select multiple>
	<option>Opt 1</option>
	<option>Opt 2</option>
    <option>Opt 3</option>
</select>
<textarea placeholder="Some Text"></textarea>
<input type="submit">

CSS

*{margin: 0; padding: 0;}body{width: 50%; margin: auto;line-height: 1.5em;font-size: 1.05em;background-color: rgba(35,35,35, 1);font-family: 'Avenir Light',Arial,sans-serif;}
textarea,
select,
option,
input{
	padding: 5px;
	width: 100%;
	border-radius: 4px;
	background-color: rgba(255,255,255,.1);
	border: none;
	color: rgba(255,255,255, .6);
    margin-top: 15px;
}
textarea:hover,
select:hover,
option:hover,
input:hover{
	background-color: rgba(0,190,255, .5);
	color: rgba(255,255,255, 1);
	transition: all 0.4s;
}
textarea:focus,
select:focus,
option:focus,
input:focus{
	background-color: rgba(255,255,255, .03);
	color: rgba(255,255,255, 1);
	transition: all 0.3s;
}
option{
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-top: 3px;
}
textarea{
    resize: vertical;
    min-height: 2.5em;
    max-height: 100px;
}
input[type="submit"]{
	width: auto;
	border: 2px solid rgba(0,190,255, .5);
	background-color: rgba(255,255,255,0);
}
input[type="submit"]:hover{
	border: 2px solid rgba(0,190,255, 1);
	background-color: rgba(255,255,255, .1);
}