JSFiddle - React, Tailwind, and code Playground

by Megi93

HTML

<div class="extend clear bgwhite extend center" id="mainwrapper">
    <div class="extend clear" id="searchbox_container">
        <input type="text" name="searchnow" placeholder="Search here..." value="" class="extend clear display_block align_right" />
    </div>
    <!-- end of searchbox_container -->
    <div class="extend clear" id="info_data_container">
        <div class="infodata extend display_block align_left" data-name="Jason Acapela">
            <img src="img/user1.jpg" class="extend clear display_block center" alt="" width="125" height="125" title="Jason Acapela">
             <h1>Jason Acapela</h1>

            <p>Web Developer</p>
        </div>
        <!-- end of .infodata -->
        <div class="infodata extend display_block align_left" data-name="Derrick Tour">
            <img src="img/user1.jpg" class="extend clear display_block center" alt="" width="125" height="125" title="Derrick Tour">
             <h1>Derrick Tour</h1>

            <p>UI/UX</p>
        </div>
        <!-- end of .infodata -->
        <div class="infodata extend display_block align_left" data-name="Mechelle Hill">
            <img src="img/user1.jpg" class="extend clear display_block center" alt="" width="125" height="125" title="Mechelle Hill">
             <h1>Mechelle Hill</h1>

            <p>System Developer</p>
        </div>
        <!-- end of .infodata -->
    </div>
    <!-- end of #info_data_container -->
</div>
<!-- end of #mainwrapper -->

CSS

.extend {
    max-width: 100%;
    max-height: 100%;
}
.clear {
    clear: both;
    float: none;
}
.bgwhite {
    background: #ffffff;
}
.center {
    margin-left: auto;
    margin-right: auto;
}
.display_block {
    display: block;
}
.align_left {
    float: left;
}
.align_right {
    float: right;
}
#searchbox_container input[type="text"] {
    bacground: #ffffff;
    border: 1px solid #cccccc;
    padding: 8px;
    color: #555555;
}
#searchbox_container input[type="text"]:focus {
    outline: none;
}
.infodata {
    margin: 5px;
}
.infodata h1 {
    font-size: 15px;
    padding: 0px;
    margin: 0px 0px 3px 0px;
    text-align: center;
    text-transform: uppercase;
}
.aaaa {
	display: none;
}
.infodata p {
    font-size: 10px;
    padding: 0px;
    margin: 0px;
    text-align: center;
    text-transform: uppercase;
}
.infodata img {
    width: 125px;
    height: 125px;
    margin-bottom: 5px
}

JavaScript

var search = document.querySelector('#searchbox_container input');

search.addEventListener('input', function() {
	console.log('character added');
	var value = this.value.toLowerCase();
	console.log(value);
	var content = document.getElementsByClassName('infodata');
	for(var i = 0; i < content.length; i++) {
		if(content[i].hasC)
		content[i].classList.add('aaaa');
	}
	content[i].classList.remove('aaaa');
		var name = this.dataset.name.toLowerCase();
		console.log(name);
});