JSFiddle - React, Tailwind, and code Playground
HTML
<label>E-mail Address<input type="email" placeholder="" name="Email" /></label>
<label>Something Else<input type="email" placeholder="" name="bob" /></label>
CSS
.addForm .inner-wrap{
padding: 4px;
background: #F8F8F8;
border-radius: 6px;
margin-bottom: 15px;
}
.addForm h1{
background: #2A88AD;
padding: 20px 30px 15px 30px;
margin: -30px -30px 30px -30px;
border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font: normal 30px 'Bitter', serif;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
}
.addForm h1 > span{
display: block;
margin-top: 2px;
font: 13px Arial, Helvetica, sans-serif;
}
.addForm label{
display: block;
font: 13px Arial, Helvetica, sans-serif;
color: #888;
margin-bottom: 15px;
}
.addForm input[type="email"],
.addForm textarea {
display: block;
box-sizing: border-box;
width: 100%;
padding: 4px;
border-radius: 6px;
border: 2px solid #fff;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
font-weight: 900;
}
.addForm input[type="text"],
.addForm input[type="date"],
.addForm input[type="datetime"],
.addForm input[type="number"],
.addForm input[type="search"],
.addForm input[type="time"],
.addForm input[type="url"],
.addForm input[type="password"],
.addForm select {
display: block;
text-transform: uppercase;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-weight: 900;
width: 100%;
padding: 4px;
border: 1px solid #FDC;
background-color : #E8E8E7;
box-shadow: 6px 4px 4px -4px rgba(77,89,85,0.36);
}
.addForm .section{
font: normal 20px 'Bitter', serif;
color: #2A88AD;
margin-bottom: 5px;
}
.addForm .section span {
background: #2A88AD;
padding: 5px 10px 5px 10px;
position:...