JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<html>

  <body>
    <div id="tabs">
      <ul>
        <li><a href="#search">Search</a></li>
        <li><a href="#documents">Documents</a></li>
        <li><a id="documents2_id" href="#documents2">Documents2</a></li>
        <li><a href="#graph">Graph</a></li>
      </ul>

      <div id="search">
        <ul>
          <li>search item 1</li>
          <li>search item 2</li>
        </ul>

        <p>How can I open <a href="https://www.google.com/">this link</a> (Google, for example), in the 'Documents' tab? ... Ajax solutions preferred.</p>

        <p>Please note that in my project, I am presently working with local files on a localhost webserver; however, I am interested in comments and suggestions on CORS issues.]</p>

        <p><button type="button" onclick='$("#documents2_id").trigger("click");'>
            Go to 'Documents2' tab
          </button> </p>
      </div>

      <div id="documents">
        <ul>
          <li>documents item 1</li>
          <li>documents item 2</li>
        </ul>
      </div>

      <div id="documents2">
        <ul>
          <li>documents2 item 1</li>
          <li>documents2 item 2</li>
        </ul>
      </div>

      <div id="graph">
        <ul>
          <li>graph item 1</li>
          <li>graph item 2</li>
        </ul>
      </div>
    </div>
  </body>

</html>

CSS

body {font-size: 8pt}

JavaScript

$(init);

    function init() {
      $("#tabs").tabs();
    }