JSFiddle - React, Tailwind, and code Playground

by Travis Crum

HTML

<div id="tsheader">
    <form id="tsnewsearch" method="get" action="http://isupark.dev/">	<i class="fa fa-search" style="position: absolute; left: 5px; top:8px; overflow: visibile;"></i>
        <input type="text" class="tstextinput" placeholder=". . ." name="s" maxlength="120">
        <input type="submit" value="Search" class="tsbutton">
    </form>
    <div class="tsclear"></div>
</div>

CSS

#tsheader {
    background-color: transparent;
}
#tsnewsearch {
    float:right;
    height: 30px;
}
.tstextinput {
    margin: 0 auto;
    height: 22px;
    padding: 0px 25px;
    border:1px solid #bf2f2a;
    border-right:0px;
    border-top-left-radius: 5px 5px;
    border-bottom-left-radius: 5px 5px;
}
.tsbutton {
    margin: 10px 0;
    padding: 0px 10px !important;
    height: 22px;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    border: solid 1px #bf2f2a;
    border-right: 0px;
    background: #bf2f2a;
    background: -webkit-gradient(linear, left top, left bottom, from(#bf2f2a), to(#862724));
    background: -moz-linear-gradient(top, #bf2f2a, #862724);
    border-top-right-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
    color: #000;
}
.tsbutton input, button {
    font-size: 13px;
    font-weight: 700px;
    color: #000 !important;
}
.tsbutton:hover {
    background: #bf2f2a;
    background: -webkit-gradient(linear, left top, left bottom, from(#E03630), to(#bf2f2a));
    background: -moz-linear-gradient(top, #E03630, #bf2f2a);
}
/* Fixes submit button height problem in Firefox */
 .tsbutton::-moz-focus-inner {
    border: 0;
}
.tsclear {
    clear:both;
}