JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<form id="searchform" action="http://www.jetbookingdirect.com/" method="get"> 
                    <input type="submit" value="Go" id="searchsubmit"/> 
                    <input type="text" id="s" name="s" value="" placeholder="Search the site..." /> 
                    </form>

CSS

#headeractions {
    width:960px;
    margin:0 auto;
}

.searchclick {
    background:url('http://www.jetbookingdirect.com/wp-content/themes/jetbook2012/img/searchico.png') no-repeat left center;
    width:48px;
    height:48px;
    padding:8px;
    padding-right:0;
    float:right;

}
#searchform {
   border:1px solid #d0d0d0;
   border-radius:25px;
    width:60px;  
    float:right;
    -moz-transition:all 0.1s linear;
    -webkit-transition:all 0.1s linear;
    transition:all 0.1s linear;
}

input[type="submit"]  {
    text-indent:-9999px;
    background:url('http://www.jetbookingdirect.com/wp-content/themes/jetbook2012/img/searchico.png') no-repeat left center;
    width:48px;
    height:48px;
    padding:0;
    float:right;
    border:0;
}

input[type="text"]  {
    width:0;
    padding:0;
    border:0;
    margin-top:4px;
    background:transparent;
    height:20px;
    float:right; 

}

#searchform:hover{
    width:200px;
    border:1px solid #999;
}