JSFiddle - React, Tailwind, and code Playground

by Brett DeWoody

HTML

<input type="search" placeholder="Search" />

CSS

body {
    width:100%;
    height:100%;
}
input {
    background-color:#FFFFFF;
    width:160px;
    
    /*
    * Demo only
    */
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
}
input::-webkit-input-placeholder {
    color: #CCCCCC;
    position:relative;
    padding-left:0;
    -webkit-transition: padding 0.5s;
    /* For Safari 3.1 to 6.0 */
    transition: padding 0.5s;
}
input:-moz-placeholder {
    /* Firefox 18- */
    color: #CCCCCC;
    position:relative;
    padding-left:0;
    -moz-transition: padding 0.5s;
    /* For Safari 3.1 to 6.0 */
    transition: padding 0.5s;
}
input::-moz-placeholder {
    /* Firefox 19+ */
    color: #CCCCCC;
    position:relative;
    padding-left:0;
    -moz-transition: padding 0.5s;
    /* For Safari 3.1 to 6.0 */
    transition: padding 0.5s;
}
input:-ms-input-placeholder {
    color: #CCCCCC;
    position:relative;
    padding-left:0;
    -ms-transition: padding 0.5s;
    /* For Safari 3.1 to 6.0 */
    transition: padding 0.5s;
}
/*
* On hover
*/
 input:hover::-webkit-input-placeholder, input:focus::-webkit-input-placeholder {
    padding-left:100px;
}
input:hover:-moz-placeholder, input:focus:-moz-placeholder {
    /* Firefox 18- */
    padding-left:100px;
}
input:hover::-moz-placeholder, input:focus::-moz-placeholder {
    /* Firefox 19+ */
    padding-left:100px;
}
input:hover:-ms-input-placeholder, input:focus:-ms-input-placeholder {
    padding-left:100px;
}