JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <style>
    div.wrapper
    {
      position:relative;
      
    }
    div.back_wrap
    {
      position: relative;
      z-index: 90;
      cursor: text;
      user-select: none;
      -o-user-select: none;
      -moz-user-select: none;
      -khtml-user-select: none;
    }
    div.back
    {
      position: absolute;
      color: #777;
      z-index: 90;
      cursor:text;
      margin-left:3px;
      margin-top:2px;
    }
    input
    {
      position: relative;
    }
    </style>
    <script src='http://yandex.st/jquery/1.8.3/jquery.min.js'></script>
</head>
  <body>
    <div class='wrapper'>
      <div class='back_wrap'>
        <div class='back'>Поиск по новостям</div>
      </div>
      <input placeholder="" type="text" prev='' autocomplete="off" class="text" value="">
    </div>

CSS

div.wrapper
    {
      position:relative;
      
    }
    div.back_wrap
    {
      position: relative;
      z-index: 90;
      cursor: text;
    }
    div.back
    {
      position: absolute;
      color: #777;
      z-index: 90;
      cursor:text;
      margin-left:3px;
      margin-top:2px;
    }

JavaScript

var change_checker;
    change_value = function()
    {
        if ($('input').val().length)
        {
            $('.back_wrap').hide();
        }
        else
        {
            $('.back_wrap').show();
        }
    }
    $('.back_wrap').click(function()
    {
        $('input').focus();
    });
    $('input').focus(function(){
        $('.back').css({'color':'lightgrey'});
        change_checker = setInterval(function()
        {
            var current_value = $('input').val();
            var prev_val = $('input').attr('prev');
            if (current_value != prev_val)
            {
                change_value();
                $('input').attr('prev',current_value);
            }
        },90);
    });
    $('input').blur(function(){
        clearInterval(change_checker);
        $('.back').css({'color':'grey'});
    });