JSFiddle - React, Tailwind, and code Playground

CSS

body {
    background:#ccc;
}
.fancyInput {
    min-width:300px;
    max-width:250px;
    font-size: 16px;
    color: #FFF;
    vertical-align: middle;
    line-height: 1.3;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .15), 0 2px 4px rgba(0, 0, 0, .2) inset, 0 0 12px rgba(255, 255, 255, .1);
    padding: 8px 20px;
    background: rgba(0, 0, 0, .1);
    border-radius: 5px;
}

JavaScript

$('section :input').val('').fancyInput()[0].focus();
// Everything below is only for the DEMO
function init(str) {
    var input = $('section input').val('')[0],
        s = 'http://apo-ucoz.com - уникальные скрипты для uCoz'.split('').reverse(),
        len = s.length - 1,
        e = $.Event('keypress');

    var initInterval = setInterval(function () {
        if (s.length) {
            var c = s.pop();
            fancyInput.writer(c, input, len - s.length).setCaret(input);
            input.value += c;
            //e.charCode = c.charCodeAt(0);
            //input.trigger(e);

        } else clearInterval(initInterval);
    }, 150);
}

init();