JSFiddle - React, Tailwind, and code Playground

by Umar

HTML

<form action="" class="search-form frame inbtn rlarge">
    <input type="text" name="search" class="search-input" placeholder="Search..." />
    <input class="search-btn" type="submit" value="Go" />        
</form>

CSS

body {
    background: #ededed;
    font: 14px/1.6 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-align: center;   /* Just to center the form in the demo, otherwise not needed */
}

input[type=submit]::-moz-focus-inner {
    border: 0;
    padding: 0;
}

::-webkit-input-placeholder {
    color: #888;
}

input:-moz-placeholder {
    color: #888;
}

.search-form {
    margin-top: 120px;
    position: relative;
    display: inline-block;
    zoom: 1; /* ie7 hack for display:inline-block */
    *display: inline;
}

.search-form.frame {
    padding: 7px;
    border: 1px solid #ccc;
    background-color: #ededed;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#d2d1d0)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #f6f6f6, #d2d1d0); /* Chrome 10+, Saf5.1+, iOS 5+ */
    background-image:    -moz-linear-gradient(top, #f6f6f6, #d2d1d0); /* FF3.6 */
    background-image:     -ms-linear-gradient(top, #f6f6f6, #d2d1d0); /* IE10 */
    background-image:      -o-linear-gradient(top, #f6f6f6, #d2d1d0); /* Opera 11.10+ */
    background-image:         linear-gradient(top, #f6f6f6, #d2d1d0);
    -moz-box-shadow:    0 1px 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    box-shadow:         0 1px 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    -moz-background-clip:    padding;
    -webkit-background-clip: padding-box;
    background-clip:         padding-box;
}

.search-input {
    width: 196px;
    height: 20px;
    padding: 6px 10px 6px 35px;
    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
    outline: none;
    position: relative;
    background-color: #fff;
    background-position: 10px center;
    background-repeat: no-repeat;
    background-image:...