JSFiddle - React, Tailwind, and code Playground

HTML

<div id="search-box"></div>
<div id="search-results-container" style="border:solid 1px red">
  <div>
    Bootstrap Modal (This should be hidden and open just when you press search)
  </div>
  <div id="search-results">
  </div>
</div>

JavaScript

var myCallback = function() {
  if (document.readyState == 'complete') {
    // Document is ready when CSE element is initialized.
    // Render an element with both search box and search results in div with id 'test'.
    google.search.cse.element.render(
        {
          div: "search-box",
          tag: 'searchbox'
         },{
          div: "search-results",
          tag: 'searchresults'
         });
  } else {
    // Document is not ready yet, when CSE element is initialized.
    google.setOnLoadCallback(function() {
       // Render an element with both search box and search results in div with id 'test'.
        google.search.cse.element.render(
            {
              div: "search-box",
              tag: 'searchbox'
            },{
          div: "search-results",
          tag: 'searchresults'
         });
    }, true);
  }
};

// Insert it before the CSE code snippet so that cse.js can take the script
// parameters, like parsetags, callbacks.
window.__gcse = {
  parsetags: 'explicit',
  callback: myCallback
};

// Make sure in jsFiddle you have selected option onLoad
(function() {
  var cx = '017643444788069204610:4gvhea_mvga'; // Insert your own Custom Search engine ID here
  var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
  gcse.src = (document.location.protocol == 'https' ? 'https:' : 'http:') +
      '//www.google.com/cse/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();