JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<input type="text" class='search' placeholder='поиск...'>
<br>
<br>
<div class="names">
    <div class="name">Вася КОНДРАШОВ</div>
    <div class="name">Оля ТОПУНОВА</div>
    <div class="name">♥Дай ПАС</div>  
    <div class="name">Витя РЫЖАКОВ</div>
    <div class="name">Сережа БЕЗРУКОВ</div>
</div>

CSS

body {
    background-color: black;
}

*::-webkit-input-placeholder {
    color: white;
}

*::-moz-placeholder {
    /* FF 19+ */
    color: red;
}

.search {
    font-size: 32pt;
    outline: none;
    border: 0;
    background-color: black;
    color: white;
}

.name {
    float: left;
    margin-right: 15px;
    color: white;
}

JavaScript

$('.search').on('keyup change', function(event) {
    var value = $(this).val();
    
    var elems = $('.name');
    elems.each(function(index, el) {
        var el_val = $(el).html().toLowerCase();
        if (el_val.search(value.toLowerCase()) != -1) {
            $(el).slideDown(200);
        }
        else {
            $(el).slideUp(200);
        }
    });
});