JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <div class="container">
         <h2>Test</h2>
         <div class="block"></div>
            <div class="block">
            <input type="text" name="SampleId" id="searchTerm" value="" size="12" class="search_box" onkeyup="doSearch()"/>
            </div>
            
            <br /><br />
            <h2 id="noresults" style="margin-top: 10px; margin-left: 0; display: none;">No found!</h2>
<table id="dataTable" border="1" width="100%" cellspacing="0" cellpadding="5">
<thead>
<tr>
<th id="SampleId">Sample Id</th>
<th>Column 1</th>
<th>Column</th>
</tr>
</thead>
<tr>
<td id="SampleId">345678917</td>
<td>Test 1</td>
<td>one_test1@gmail.com</td>
</tr>
<tr>
<td id="SampleId">>3512376894</td>
<td>Test 2</td>
<td>two.test2@hotmail.com</td>
</tr>
</table>
            </div>
       </form>

CSS

body { padding: 30px 30px; font: 13px/100% Verdana, sans-serif; overflow: hidden; }
form { padding: 20px; width: 600px; display: block; background: #FAFAFA; margin: 0 auto;}
input, textarea{
	padding: 5px;
	border: 1px solid #E5E5E5;
	outline: 0;
	font: normal 15px/150% Verdana, sans-serif;
    margin-top: 10px;
    margin-bottom: 5px;
    vertical-align:middle;
    margin-left:20px
	-webkit-box-shadow: 0 0 8px rgba(0,0,0,.1);
	-moz-box-shadow: 0 0 8px rgba(0,0,0,.1);
	box-shadow: 0 0 8px rgba(0,0,0,.1);
	background: -webkit-linear-gradient(top, #EEE 0px, #FFF 25px);
	background: -moz-linear-gradient(top, #EEE 0px, #FFF 25px);
}
h2 {
    display:inline-block;
    float: center;
    padding-bottom: 5px;
    padding-left: 160px;
    text-align: right;
    width: 250px;
}
textarea { width: 420px; max-width: 400px; height: 180px; }
input:hover, input:focus,
textarea:hover, textarea:focus {
	border-color: #C9C9C9;
	-webkit-box-shadow: 0 0 8px rgba(0,0,0,.15);
	-moz-box-shadow: 0 0 8px rgba(0,0,0,.15);
	box-shadow: 0 0 8px rgba(0,0,0,.15);
}
select{
	padding: 5px 40px 5px 5px; 
	height:40px; 
	font-family: Verdana, sans-serif;
	background: url(../arrow.png) 90% 50% no-repeat;
	-webkit-appearance: none;
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	border: 1px solid #CCC;
	color: #999;
	font-size: 90%;
	overflow: hidden;
}
select:hover, select:focus {
	-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
	outline: 0;
	cursor: pointer;
	border: 1px solid #CCC;
	color: #999;
	font-size: 90%;
	overflow: hidden;
}
th,
td { border: 1px solid #000; padding: 0.2em 0.3em 0.1em 0.3em; padding-top:18px; color: #808080; }
table.center { margin-left:auto; margin-right:auto; }

JavaScript

function doSearch() {
            var searchText = document.getElementById('searchTerm').value;
            var targetTable = document.getElementById('dataTable');
            var targetTableColCount;

            //Loop through table rows
            for (var rowIndex = 0; rowIndex < targetTable.rows.length; rowIndex++) {
                var rowData = '';

                //Get column count from header row
                if (rowIndex == 0) {
                    targetTableColCount = targetTable.rows.item(rowIndex).cells.length;
                    continue; //do not execute further code for header row.
                }

                //Process data rows. (rowIndex >= 1)
                for (var colIndex = 0; colIndex < targetTableColCount; colIndex++) {
                    rowData += targetTable.rows.item(rowIndex).cells.item(colIndex).textContent;
                    //if table rows = 0 then show no results text

                    if (rowIndex <= 1) {
                        document.getElementById('noresults').style.display = "block";
                    }
                }

                //If search term is not found in row data
                //then hide the row, else show and hide no results text
                if (rowData.indexOf(searchText) == -1) {
                    targetTable.rows.item(rowIndex).style.display = 'none';
                }
                else {
                    targetTable.rows.item(rowIndex).style.display = 'table-row';
                    document.getElementById('noresults').style.display = "none";
                }
            }
        }