JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jqueryui.com//resources/demos/style.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="main-xxx-tabs">
    <ul>
        <li><a href="#preloaded-1">preloaded1</a></li>
        <li><a href="/losnir/seJ8j/show">link1</a></li>
        <li><a href="/losnir/seJ8j/1/show">link2</a></li>
        <li><a href="/losnir/seJ8j/2/show">link2</a></li>
    </ul>
   <!-- vv Constructed from your original panelTemplate vv -->
   <div id="preloaded-1" class="main-xxx-tabs-content">
      <p>Your preloaded content here.</p>
   </div>
</div>

JavaScript

jQuery("#main-xxx-tabs").tabs({
  panelTemplate: "<div class='main-xxx-tabs-content'></div>",
  beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
})