JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/7.0.0/jquery.mark.es6.js"></script>
<script src="https://googledrive.com/host/0B8EMN-mA1X_mWGlEdUJPVHVPRXM/initsticky.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/superhero/bootstrap.min.css">
 <div class="section20230">
    <nav>
      
<!--      
       <ul class="menu20230">
      
      <li>
      

        
        
        
        </li>
        </ul>
   -->
   
    
    
     <ul class="hidden20230 menu20230">
    
    
       <li>
      
      
      
      
      
      
      

<div class="panel panel-default">
<!-- <div class="panel-heading">Search</div> -->

    <div class="search row">
      <div class="col-xs-6">
      
             <input type="text" name="keyword" class="form-control input-sm" placeholder="Type here what you are looking for...">
      </div>
      <div class="col-xs-6">
     
        <input type="checkbox" name="opt[]" value="separateWordSearch" unchecked> separate word search
        
        <input type="checkbox" name="opt[]" value="diacritics" checked> diacritics
      
         </div>
    </div>
  </div>

      
      
        
        
        </li>
    
    
    
     </ul>
    
    
    
    </nav>


</div>








<div class="panel panel-default">
  <div class="panel-body context">
      
     


        
        
        
        <div id="lecontainer11111">
        
        
            <h2>CONHEÇA O TESOURO DIRETO</h2>
   <div>
     <h2>O QUE É?</h2>
     <p>O Tesouro Direto é um Programa do Tesouro Nacional desenvolvido em parceria com a BMF&amp;F Bovespa para venda de títulos públicos federais para pessoas físicas, por meio da internet.<br />
         <br />
       Concebido em 2002, esse Programa surgiu com o objetivo de democratizar o acesso aos títulos...

CSS

div.search span,
div.search input[name="keyword"] {
  display: block;
}

div.search input[name="keyword"] {
  margin-top: 4px;
}

div.panel {
  margin-bottom: 15px;
}

div.panel .panel-body p:last-child{
  margin-bottom: 0;
}

mark {
  padding: 0;
}


.col-xs-6 {
 float:left;
 } 
  .search.row { background:#333333}
  
  
  
  
  
  
.ui-grid-c .ui-block-a {
    clear: left;
}

.ui-grid-c > :nth-child(n) {
   /* width: 25%; */
    margin-right: 2px;
}
.ui-grid-c .ui-block-a, .ui-grid-c .ui-block-b, .ui-grid-c .ui-block-c, .ui-grid-c .ui-block-d {
   /* width: 24.925%; */
}
.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e {
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    min-height: 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
  
  .ui-grid-a, .ui-grid-b, .ui-grid-c, .ui-grid-d {
    overflow: hidden;
}
  .ui-btn-inner, .ui-btn-text {
    -webkit-border-radius: inherit;
    border-radius: inherit;
}

.ui-btn-inner {
    font-size: 12px;
    padding: .6em 20px;
    min-width: .75em;
    display: block;
    position: relative;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    zoom: 1;
}
.ui-btn-inner {
    border-top: 1px solid #fff;
    border-color: rgba(255,255,255,.3);
}
Inherited from a.searchButtonClickText_h.ui-btn.ui-btn-up-c.ui-shadow.ui-btn-inline
.ui-btn-up-c:visited, .ui-btn-up-c a.ui-link-inherit {
    color: #2f3e46 /*{c-bup-color}*/;
}

ul.menu20230 {
    height: 45px !important;
  }
  
ul.menu20230 li {
width:100% !important;
}
ul.menu20230.hidden20230 {
	background-color:transparent !important;
}

ul.menu20230 li a {
    line-height: 40px;
    padding-bottom: 5px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
}
.ui-btn {
    display: block;
    text-align: center;
    cursor: pointer;
    position: relative;
    margin: .5em 0;
 ...

JavaScript

$.noConflict()
jQuery(function($) {
  var mark = function() {

    // Read the keyword
     var keyword = $("input[name='keyword']").val();
	 
/*
var container = $('body'),
    scrollTop = $("input[name='keyword']");

container.scrollTop(
    scrollTop.offset().top - container.offset().top + container.scrollTop()
);

*/


 /*
    $('body').animate({
                    scrollTop: $("input[name='keyword']").offset().top -30
                }, 200);
       
*/  

/*     */
    // Determine selected options
    var options = {
    
	
     "filter": function(node, term, counter, totalCounter){
        if(term === keyword && counter >= 1){
            return false;
        } else {
            return true;
        }
    }
    
	
	
	
	
    };
    $("input[name='opt[]']").each(function() {
      options[$(this).val()] = $(this).is(":checked");  });



  
    // Mark the keyword inside the context
    $(".context").unmark();
    $(".context").mark(keyword, options);
 
 
 };

  $("input[name='keyword']").on("keyup", mark);
  $("input[type='checkbox']").on("change", mark);

 });