JSFiddle - React, Tailwind, and code Playground

HTML

<div class="search-box text-center"><input type="text" name="search" placeholder="Wikipedia内を検索" class="form-control" id="search-query"></div>
      <div class="buttons">
        <button class="btn" id="search-button">検索する</button>
        <a href="https://ja.wikipedia.org/wiki/Special:Random" target="_blank"><button class="btn">ランダムでページを表示</button></a>
      </div>
  <div id="results-indicate">"<span id="search-term"></span>"の検索結果</div>
  <div id="the-results"></div>

CSS

.main {
  max-width: 35em;
  margin: 0 auto;
  padding-left: 5px;
  padding-right: 5px;
}

h1 {
  margin-top: 10px;
  font-family: Bree serif;
  font-size: 30px;
}

button {
  margin: 10px 2px 2px 2px;
}

input:hover, button:hover {
  cursor: pointer;
  box-shadow: 1px 1px 1px 1px #c0c0c0;
}

#results-indicate {
  display: none;
  margin-top: 10px;
  font-size: 0.9em;
  font-weight: lighter;
  padding-bottom: 10px;
  border-bottom: 1px groove;
}

#the-results {
  margin-top: 20px;
}

JavaScript

window.onload = function() {
    document.getElementById("search-query").focus();
};

$(document).ready(function() {
    $("#search-button").on('click', function() {
      $('#results-indicate').css('display', 'block');
    var keyword = document.getElementById("search-query").value;
      document.getElementById('search-term').innerHTML = keyword;
    var url = "https://ja.wikipedia.org/w/api.php?action=opensearch&search=" + keyword + "&limit=10&format=json&callback=?"
    
  $.ajax({
    url: url,
    dataType: 'jsonp',
    success: function(info) {
      document.getElementById("the-results").innerHTML = '';
      
      var headlines = info[1];
      var extract = info[2];
      var link = info[3];
      

      for (i = 0; i < headlines.length; i++) {
        document.getElementById("the-results").innerHTML += '<strong>' + '<a href="' + link[i] + '" target="_blank">' + headlines[i] + '</a>' + '</strong>' + '<br>' + '<font color="green">' + link[i] + '</font>' + '<br>' + extract[i] + '<br><br>';
      }
    }
  })
  })
 
  $('#search-query').keyup(function(event){
        if (event.keyCode == 13) {
          event.preventDefault();
          $('#search-button').click();
        }
      })
})