JSFiddle - React, Tailwind, and code Playground

by ZEZEME

HTML

<form class="form-style-4" action="" method="post">

<input type="text" name="field1" required="true" placeholder="name"/>

<input type="email" name="field2" required="true" />

<input type="text" name="field3" required="true" />

<textarea name="field4" onkeyup="adjust_textarea(this)" required="true"></textarea>

<input type="submit" value="Send Letter" />
</form>

CSS

<style type="text/css">
.form-style-4{
	width: 450px;
	font-size: 16px;
	background: #495C70;
	padding: 30px 30px 15px 30px;
	border: 5px solid #53687E;
}
.form-style-4 input[type=submit],
.form-style-4 input[type=button],
.form-style-4 input[type=text],
.form-style-4 input[type=email],
.form-style-4 textarea,
.form-style-4 label
{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	color: #fff;

}
.form-style-4 label {
	display:block;
	margin-bottom: 10px;
}
.form-style-4 label > span{
	display: inline-block;
	float: left;
	width: 150px;
}
.form-style-4 input[type=text],
.form-style-4 input[type=email] 
{
	background: transparent;
	border: none;
	border-bottom: 1px solid #83A4C5;
	width: 275px;
	outline: none;
	padding: 0px 0px 0px 0px;
	font-style: italic;
}
.form-style-4 textarea{
	font-style: italic;
	padding: 0px 0px 0px 0px;
	background: transparent;
	outline: none;
	border: none;
	border-bottom: 1px solid #83A4C5;
	width: 275px;
	overflow: hidden;
	resize:none;
	height:20px;
}

input[type=submit],
input[type=button]{
	background: #576E86;
	border: none;
	padding: 8px 10px 8px 10px;
	border-radius: 5px;
	color: #A8BACE;
}