JSFiddle - React, Tailwind, and code Playground
HTML
<div id="search-box">
<gcse:searchbox></gcse:searchbox>
</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">
<gcse:searchresults></gcse:searchresults>
</div>
</div>
JavaScript
// 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);
})();