JSFiddle - React, Tailwind, and code Playground

HTML

<container id="page">
  
  <div id="flex-container">
  <div class="search-bar">
    <form class="searchbar">
      <input type="search" name="wikisearch" placeholder="Search wiki..." id="search">
      <input type="submit" id="go" value="Go"/>
      
      <input type="button" id="random" value="Random" onclick="window.location ='http://en.wikipedia.org/wiki/Special:Random';"/>
      
    </form>
   
  </div>
  </div>
  
  <div class="results">
    <!-- search results go here-->
  </div>
  
</container>

JavaScript

$(document).ready(function() {

  var searchBar = $("#search");
  var resultDiv = $(".results");
  var goButton = $("#go");
	$('form').submit(function() {
    $.ajax({
      url: "https://en.wikipedia.org/w/api.php?",
      data: {
        action: 'query',
        list: 'search',
        srsearch: searchBar.val(),
        format: 'json'
      }, //end of data
      dataType: 'jsonp',
      success: function(data){
          var datatp = '';
          data.query.search.map(function(f) {
              datatp += '<h3>' + f.title + '</h3>';
              datatp += f.snippet;
            }) //end of map
          resultDiv.html(datatp);
        } //end of success
    }); //end of ajax
    return false;
	});
}); //end of body func