JSFiddle - React, Tailwind, and code Playground

HTML

<div id="search-box-4">
    <form action="/Search" id="search-form-4" method="get" target="_top">
        <input id="search-text-4" name="q" placeholder="IMEI Number" type="text" pattern=".{15,15}" required />
        <br />
        <input id="search-button-4" type="submit" value="Search" href="http://fairdash.com/" onclick="window.location.href = 'http://' + $(this).attr('href')+'';" />
    </form>
</div>

CSS

#search-box-4 {
    position: relative;
    width: 100%;
    margin: 20px 0;
}
#search-text-4 {
    font-size: 14px;
    color: #ddd;
    border-width: 0;
    background: transparent;
}
#search-box-4 input[type="text"] {
    width: 90%;
    padding: 11px 0 12px 1em;
    color: #333;
    outline: none;
}
/*  EXAMPLE 4  */
 #search-form-4 {
    height: 40px;
    border: 1px solid #eee;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    -webkit-box-shadow: inset 2px 2px 4px #ccc;
    -moz-box-shadow: inset 2px 2px 4px #ccc;
    box-shadow: inset 2px 2px 4px #ccc;
    overflow: hidden;
}
#search-button-4 {
    position: absolute;
    top: 5px;
    right: 4px;
    height: 32px;
    width: 80px;
    font-size: 14px;
    color: #fff;
    line-height: 32px;
    text-align: center;
    text-shadow: 1px 1px 0px #888;
    border-width: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #bbb;
    background: -moz-linear-gradient(top, #aaaaaa 0%, #b9b9b9);
    background: -webkit-gradient(linear, left top, left bottom, from(#aaaaaa), to(#b9b9b9));
    -webkit-box-shadow: inset 0px -1px 1px #888, 0px 2px 2px #ccc;
    -moz-box-shadow: inset 0px -1px 1px #888, 0px 2px 2px #ccc;
    box-shadow: inset 0px -1px 1px #888, 0px 2px 2px #ccc;
    cursor: pointer;
}