JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <input type="text" id="type_me" class="type_text" placeholder="Type me!"></input>
    <input type="text" id="submit_me" class="submit_text" placeholder="Submit me!"></input>
    <button type="submit" id="submit">&crarr;</button>
    <textarea type="write_me" placeholder="Write me!"></textarea>
    <button type="button" id="click_me">Click me!</button>
</div>

CSS

html, body {
    height: auto;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
#container {
    width: 300px;
    height: auto;
    margin: 50px -webkit-calc(50% - 150px);
    margin: 50px calc(50% - 150px);
}
/*button*/
 button {
    color: #FFF;
    background: linear-gradient(to bottom, #51A5FF 0%, #458CD8 100%);
    box-shadow: 1px 1px 1px #C3C3C3;
    border: none;
    cursor: pointer;
    /*font-family: 'Average Sans', sans-serif;*/
    font-size: 13px;
    text-shadow: 1px 1px 1px #204366;
}
button[type=button] {
    margin: 10px 0px;
    padding: 5px 15px;
    border-radius: 3px;
}
button[type=submit] {
    width: 23px;
    height: 23px;
    padding: 0px 1px 1px 0px;
    margin: 10px 0px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    float: right;
}
button:hover {
    background: #4186CC;
}
button:active {
    box-shadow: 1px 1px 1px #C3C3C3, inset 1px 1px 3px #204366;
}
#click_me {
    width: 100%;
    height: auto;
}
/*input text*/
 input[type=text], textarea {
    margin: 10px 0px;
    height: 18px;
    padding: 2px 3px;
    border-top: none;
    border-right: none;
    border-left: 1px solid;
    border-bottom: 1px solid;
    border-color: #A5A5A5;
    color: #707070;
    /*font-family: 'Average Sans', sans-serif;*/
    font-size: 13px;
}
input[type=text]:hover, textarea:hover {
    border-color: #707070;
}
input[type=text]:focus, textarea:focus {
    background: #F2F2F2;
    border-color: #51A5FF;
    outline: none;
}
input[type=text].submit_text {
    margin-right: 0px;
    display: block;
    float: left;
}
input[type=text].type_text, textarea {
    border-top-right-radius: 3px;
}
textarea {
    width: -webkit-calc(100% - 7px);
    width: calc(100% - 7px);
    height: 200px;
    resize: none;
    font-family:"Arial";
}
#type_me {
    width: -webkit-calc(100% - 7px);
    width: calc(100% - 7px);
}
#submit_me {
    width: -webkit-calc(100% - 30px);
    width: calc(100% - 30px);
}