JSFiddle - React, Tailwind, and code Playground

HTML

<section class="subscribe" title='Lorem Ipsum'>
    <form class="form-wrapper cf" method="post">
        <input class="tiptipNewsletterInfo" id="emailInputText" name="email" placeholder="Enter your email here..." />
        <button class="showforDesktopsOnly" id="submitBtnForDesktop" type="submit">Subscribe</button>
    </form>
</section>

CSS

.form-wrapper #emailInputText {
    max-width: 145px;
    width: 100%;
    height: 22px;
    float: left;
    font: 10px'lucida sans', 'trebuchet MS', Tahoma;
    border:1px solid #414d7d;
    background-color: #30395c;
    margin: 0px 5px 0px 0px;
    -moz-box-shadow: inset 0 0 10px #252c47;
    -webkit-box-shadow: inset 0 0 10px #252c47;
    box-shadow: inset 0 0 10px #252c47;
    text-align:center;
    color: #a4afcb;
}
.form-wrapper #emailInputText::-webkit-input-placeholder {
    color: #a4afcb;
}
.form-wrapper #emailInputText:-moz-placeholder {
    color: #a4afcb;
}
.form-wrapper #emailInputText::-moz-placeholder {
    color: #a4afcb;
}
.form-wrapper #emailInputText:-ms-input-placeholder {
    color: #a4afcb;
}
.form-wrapper #submitBtnForDesktop {
    overflow: visible;
    position: relative;
    float: left;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 28px;
    width: 88px;
    text-indent:-9999px;
    background: url("http://i.imgur.com/ANkUR4e.png") no-repeat 0 0 transparent;
    transition: background-image 0.5s;
}
.form-wrapper #submitBtnForDesktop:hover {
    background: url("http://i.imgur.com/ANkUR4e.png") no-repeat 0 -28px transparent;
}