JSFiddle - React, Tailwind, and code Playground

HTML

<input id="inp-film" type="text" placeholder="Введите название">
    
<div id="film-wrap">
    
    <div class="film" style="display: none;">
        <img class="film-poster" src="" alt="" />
        <h3 class="film-name"></h3>
        <div class="film-description"></div>
    </div>
    
</div>

CSS

#inp-film {
    width: 280px;
    height: 40px;
    
    padding: 0 10px;
    
    border: 1px solid #ccc;
}

.film {
    width: 280px;
    
    margin: 20px 0;    
    padding: 15px 10px;
    
    border: 1px solid #ccc;
    
    text-align: center;
}

.film-poster {
    display: block;    
    max-height: 200px;
    margin: auto;
}

JavaScript

var wrap = document.querySelector('#film-wrap'),
    item = wrap.children[0].cloneNode(true),
    inp = document.querySelector('#inp-film'),
    data,
    createItem;

item.removeAttribute('style');

createItem = function(index) {
    
    var targetData = data[index],
        newItem = item.cloneNode(true);
    
    newItem.querySelector('.film-poster').src = targetData.poster;
    newItem.querySelector('.film-name').textContent = targetData.name;
    newItem.querySelector('.film-description').textContent = targetData.description;
    
    return newItem;
    
};

inp.addEventListener('input', function() {

    var value = this.value.toLowerCase(),
        found = false,
        frag;
    
    if (value.length < 3) {
        wrap.innerHTML = 'Минимум три символа';
        return false;
    }
    
    frag = document.createDocumentFragment();
    
    data.forEach(function(curr, i) {
    
        if (curr.name.toLowerCase().search(value) === -1) return false;
        
        frag.appendChild(createItem(i));
        found = true;
    
    });
    
    if (found) {    
        wrap.innerHTML = '';
        wrap.appendChild(frag);        
    }
    else {    
        wrap.innerHTML = 'Ничего не найдено';        
    }

});

data = [
    {
        "poster": "http://st.kp.yandex.net/images/film_iphone/iphone360_463897.jpg",
        "name": "Фильм Приключения Паддингтона",
        "description": "Познакомьтесь, это медведь по имени Паддингтон из дремучего Перу."
    },
    {
        "poster": "http://st.kp.yandex.net/images/film_iphone/iphone360_810247.jpg",
        "name": "Фильм Ёлки лохматые",
        "description": "Хозяйка Пирата и Йоко — самарская девочка Настя — улетает с бабушкой в Питер."
    },
    {
        "poster": "http://st.kp.yandex.net/images/film_iphone/iphone360_505966.jpg",
        "name": "Фильм Восхождение Юпитер",
        "description": "Юпитер Джонс родилась под ночным небом, и все знаки предсказывали, что девочке предстоят великие свершения."
 ...