JSFiddle - React, Tailwind, and code Playground

by SchmalzyB

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="input-wrap">
    <input class="form-control" type="text" />
    <span class="placeholder">Enter options and hit <kbd>Enter</kbd> key</span>
</div>

CSS

body { padding: 20px 50px;}
.input-wrap { position: relative; }
.placeholder {
    position: absolute;
    top: 7px;
    left: 8px;
    color: #555;    
}

JavaScript

$('.placeholder').click(function(){
   $(this).prev().focus(); 
});

$('.form-control').focus(function() {
   $(this).next().hide();
});

$('.form-control').blur(function() {
   if($(this).val() == "")
      $(this).next().show();
});