JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="my-text-link">Click me to open the 3rd tab</a>
<div id="tabs">
    <ul>
        <li><a href="#tab1">HOME</a></li>
        <li><a href="#tab2">SERVICES</a></li>
        <li><a href="#tab3">OPTIONS</a></li>
            <li><a href="#tab4">ABOUT US</a></li>
            <li><a href="#tab5">CONTACT US</a></li>
    </ul><!-- //Tab buttons -->
    <div class="tabDetails">
        <div id="tab1" class="tabContents">
                <h1>Title1</h1>
           <iframe id="frame" src="javascript:jQuery.getJSON('https://www.google.com', function(data){
     // your code here
         $('div#external').html(data);      
     });" width="100%" height="300">
   </iframe>
 
        </div><!-- //tab1 -->
        <div id="tab2" class="tabContents">
                <h1>Title2  </h1>
                <h2>  </h2>
                <h3>  </h3>
                <iframe src="Services.html" width="1150" height="640" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
        </div><!-- //tab2 -->
        <div id="tab3" class="tabContents">
               <h1>Title3</h1>
               <iframe src="Options.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
        </div><!-- //tab3 -->
        <div id="tab4" class="tabContents">
            <h1>Title4 </h1>
            <iframe src="Aboutus.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
        </div><!-- //tab4 -->
        <div id="tab5" class="tabContents">
            <h1>Title5</h1>
           <iframe src="Contactus.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
        </div><!-- //tab5 -->
    </div><!-- //tab Details -->
</div><!-- //Tab Container -->

CSS

* {
    margin:10;
    padding:0;
}
body {
    font:normal 14px/1.5em Arial, Helvetica, sans-serif;
}
a {
    outline:none;
}
#tabs {
    background:#f0f0f0;
    border:1x solid #fff;
    margin:100px auto;
    padding:20px;
    position:absolute;
    width:1315px;
}
#tabs ul {
    overflow:hidden;
    border-left:0px solid #fff;
    height:80px;
    position:center;
    z-index:100;
}
#tabContaier li {
    float:left;
    list-style:none;
}
#tabs li {
    background:#ddd;
    border:3px solid #ffff;
    border-left:0;
    color:#666;
    cursor:pointer;
    display:block;
    height:35px;
    line-height:35px;
    padding:0 98px;
    text-decoration:none;
    text-transform:bold;
}
#tabs li:hover {
    background:#fff;
}
#tabs li.ui-state-active {
    background-color:#ffffff !important;
    border:1px solid #fff;
    border-right:px; /*error, px value not set*/
    color:#333;
}
.tabDetails {
    background:#fbfbfb;
    border:1px solid #fff;
    margin:34px px; /*error, px value not set*/
}
.tabContents {
    padding:px /*error, px value not set*/
}
.tabContents h1 {
    font:normal 24px/1.1em Georgia, "Times New Roman", Times, serif;
    padding:0 0 px;
    width:auto;
}

JavaScript

$('#tabs').tabs(); // first tab selected
   
    $('#my-text-link').click(function(){
       $('#tabs').tabs('select', 2);
      return false;        
   });
   //this works too
   /* $('#my-text-link').click(function(){
        $('#tabs li a[href="#tab3"]').trigger('click');
        return false;        
    });*/
});