JSFiddle - React, Tailwind, and code Playground

HTML

<head>
      <meta charset="utf-8">
      
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>  
      
   </head>
   <body>
  
      <!-- CONTAINER -->
      <div class="container">
         
  </div>
  <div class="row main">
       <div class="row-inner">
        <div class="twelvecol">
           <div class="clear"></div>
           <!-- TABS -->
                  <div id="simple-tabs">
                     <ul class="tabs">
                        <li><a href="#tab1">Simple Slider</a></li>
                        <li><a href="#tab2">Static Image</a></li>
                        <li><a href="#tab3">Embedded Video</a></li>
                     </ul>
                     <div class="tab_container">
                        <div id="tab1" class="tab_content">
                          <div class="sixcol">
                            <!-- Slideshow 1 -->
    <ul class="rslides" id="slider1">
      <li><a href="ajaxportfolio_4_col.html"><img src="files/images/tabs_img_1.png" alt="" /></a></li>
      <li><a href="ajaxportfolio_4_col.html"><img src="files/images/tabs_img_2.png" alt="" /></a></li>
    </ul>

                          </div> 
                          <div class="sixcol last">
                            <h1 class="entry-title uppercase">
                             Latest Work 
                            </h1>
  
                             <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Mauris massa. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. </p><br />
                             <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur...

CSS

/*----------------------------------------------
0. Reset
------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* Clearing
---------------------------------------- */
.clearfix:before,.clearfix:after,.row:before,.row:after
{
  content:'\0020';
  display:block;
  overflow:hidden;
  visibility:hidden;
  width:0;
  height:0;
}

.row:after,.clearfix:after
{
  clear:both;
}

.row,.clearfix
{
  zoom:1;
}

.clear
{
  clear:both;
  display:block;
  overflow:hidden;
  visibility:hidden;
  width:0;
  height:0;
}

.clearboth
{
  clear:both;
  display:block;
  font-size:0;
  height:0;
  line-height:0;
  width:100%;
}


/*----------------------------------------------
1. General Styles
----------------------------------------------*/
body
{
  font-family: 'PTSansBold',Helvetica, Arial, sans-serif;
  text-align:left;
  color:#555;
  background:#F5F5F5; 
  font-size:12px;
  line-height:1.6em;
  font-weight:100;
}


/* Tabs
---------------------------------------- */
#simple-tabs ul.tabs
{
  margin-right:40px;
 ...

JavaScript

$("#simple-tabs .tab_content").hide(); //Hide all content
$("#simple-tabs ul.tabs li:first").addClass("active").show(); //Activate first tab
$("#simple-tabs .tab_content:first").show(); //Show first tab content
//On Click Event
$("#simple-tabs ul.tabs li").click(function(e) {
    $("#simple-tabs ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $("#simple-tabs .tab_content").hide(); //Hide all tab content
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active content
    e.preventDefault();
});


(function($) {
    $('.tab ul.tabs li:first-child a').addClass('current');
    $('.tab .tab_content div.tabs_tab:first-child').show();

    $('.tab ul.tabs li a').click(function(g) {
        var tab = $(this).parent().parent().parent(),
            index = $(this).parent().index();

        tab.find('ul.tabs').find('a').removeClass('current');
        $(this).addClass('current');

        tab.find('.tab_content').find('div.tabs_tab').not('div.tabs_tab:eq(' + index + ')').slideUp();
        tab.find('.tab_content').find('div.tabs_tab:eq(' + index + ')').slideDown();

        g.preventDefault();

    });
})(jQuery);