JSFiddle - React, Tailwind, and code Playground

HTML

<form class="navbar-form" role="search">
    <div class="input-group">
        <input type="text" class="main-search" placeholder="What are you looking for? " name="srch-term" id="srch-term">
        <div class="input-group-btn">
            <button class="search-btn" type="submit">Reward me</button>
        </div>
    </div>
</form>

CSS

body {
    width: 100%;
    height: 100%;
    font-family: Lora, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #222222;
    background-color: #1788a7;
}
@font-face {
    font-family:'nexa_boldregular';
    src: url('../fonts/nexa_bold_0-webfont.eot');
    src: url('../fonts/nexa_bold_0-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/nexa_bold_0-webfont.woff') format('woff'), url('../fonts/nexa_bold_0-webfont.ttf') format('truetype'), url('../fonts/nexa_bold_0-webfont.svg#nexa_boldregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:'nexa_lightregular';
    src: url('../fonts/nexa_light_0-webfont.eot');
    src: url('../fonts/nexa_light_0-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/nexa_light_0-webfont.woff') format('woff'), url('../fonts/nexa_light_0-webfont.ttf') format('truetype'), url('../fonts/nexa_light_0-webfont.svg#nexa_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
html {
    width: 100%;
    height: 100%;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 35px;
    text-transform: capitalize;
    font-family:'nexa_lightregular';
    letter-spacing: 1px;
}
p {
    font-size: 16px;
    line-height: 1.5;
}
li {
    list-style: none;
}
a {
    color: #28c3ab;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
a:hover, a:focus {
    text-decoration: none;
    color: #176e61;
}
.light {
    font-weight: 400;
}
.navbar {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    text-transform: uppercase;
    font-family:'Source Sans Pro', sans-serif;
    background-color: #000;
}
.navbar-brand {
    font-weight: 700;
}
.navbar-brand:focus {
    outline: 0;
}
.navbar-custom a {
    color: #fff;
}
.navbar-custom .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition:...

JavaScript

var txt = "What are you Searching for?";
var timeOut;
var txtLen = txt.length;
var char = 0;
$('.main-search').attr('placeholder', '|');
(function typeIt() {
    var humanize = Math.round(Math.random() * (200)) + 30;
    timeOut = setTimeout(function () {
        char++;
        var type = txt.substring(0, char);
        $('.main-search').attr('placeholder', type + '|');
        typeIt();

        if (char == txtLen) {
            $('.main-search').attr('placeholder', $('.main-search').attr('placeholder').slice(0, -1)) // remove the '|'
            clearTimeout(timeOut);
        }

    }, humanize);
}());