JSFiddle - React, Tailwind, and code Playground

by anatomic

HTML

<form class="search" method="post" action="">
    <label for="search-box">Search:</label>
    <input id="search-box" type="text">
</form>

CSS

/* ----- Supporting Elements ----- */

body{
    font-family:Helvetica, Arial, sans-serif;
    background:#5a5a5a;
}
/* ----- Search Form ----- */
.search label{
    font-size:0.75em;
    font-weight:bold;
    color:#333;
    text-indent:-9999em;
    display:block;
    float:left;
}
.search input[type="text"]{
    text-indent:1px;
    padding:0 0 0 22px;
    width:0;
    height:22px;
    background:url(http://www.ian-thomas.net/examples/search-icon.png)2px 2px no-repeat, -webkit-linear-gradient(top, rgba(100,100,100,1) 0%, rgba(80,80,80,1) 10%, rgba(22,22,22,1)100%);
    background:url(http://www.ian-thomas.net/examples/search-icon.png)1px 2px no-repeat, -moz-linear-gradient(top, rgba(100,100,100,1) 0%, rgba(80,80,80,1) 10%, rgba(22,22,22,1)100%);
    border:1px solid #333;
    color:#999;
    line-height:20px;
    font-weight:bold;
    -moz-text-shadow:1px 1px 1px rgba(0,0,0,0.05);
    -webkit-text-shadow:1px 1px 1px rgba(0,0,0,0.05);
    text-shadow:1px 1px 1px rgba(0,0,0,0.05);
    -webkit-border-radius:6px;
    -webkit-box-shadow:1px 1px 0 rgba(0,0,0,0.125); 
    -webkit-transition:width 0.5s ease-in-out;
    -moz-border-radius:6px;
    -moz-box-shadow:1px 1px 0 rgba(0,0,0,0.125); 
    -moz-transition:width 0.5s ease-in-out;
    cursor:pointer;
}
.search input[type="text"]:focus{
    width:200px;
    outline:none;
    background:url(http://www.ian-thomas.net/examples/search-icon.png)2px 2px no-repeat, -webkit-linear-gradient(bottom,rgba(100,100,100,1) 0%, rgba(40,40,40,1) 2%, rgba(22,22,22,1)100%);
    background:url(http://www.ian-thomas.net/examples/search-icon.png)1px 2px no-repeat, -moz-linear-gradient(bottom,rgba(100,100,100,1) 0%, rgba(40,40,40,1) 2%, rgba(22,22,22,1)100%);
    -webkit-box-shadow:1px 1px 0 rgba(255,255,255,0.125);
    -moz-box-shadow:1px 1px 0 rgba(255,255,255,0.125);
    cursor:text;
}