JSFiddle - React, Tailwind, and code Playground
HTML
<form class="form-wrapper cf">
<input type="text" placeholder="Eyescoin Address" required />
<input type="submit" value="Buy" />
</form>
CSS
.cf:before, .cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom:1;
}
/* Form wrapper styling */
.form-wrapper {
width: 222px;
padding: 5px;
margin: 150px auto 50px auto;
background: #444;
background: rgba(0,0,0,.2);
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
/* Form text input */
.form-wrapper input[type=text] {
width: 150px;
height: 0px;
padding: 10px 5px;
float: left;
font: bold 12px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
border-radius: 3px 0 0 3px;
}
.form-wrapper input[type=text]:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input[type=text]:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input[type=text]:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
/* Form submit button */
.form-wrapper input[type=submit] {
overflow: visible;
position: relative;
float: left;
border: 0;
padding: 0;
cursor: pointer;
height: 20px;
width: 62px;
font: bold 12px/20px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #1854C4;
/* 1854C4 = Normal Theme Blue Color */
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper input[type=submit]:hover{
...