JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
          <div id="content">
          <ul id="info-nav">
                    <li><a href="#equipment_details"><span>Tab1</span></a></li>
                    <li><a href="#job_costs"><span>Tab2</span></a></li>
                    <li><a href="#job_assignment"><span>Tab3</span></a></li>
                </ul>
                <div id="info">
                <form action="inex.html" method="post" id="form1" name="form1" class="formfields">
                    <div id="equipment_details" class="hide">
                        
                        <table border="0" cellspacing="1" cellpadding="2" id="tbl_equipment_details" width="100%">
                          <tr>
                            <td width="23%" class="txt-right">XXXX</td>
                            <td width="31%"><input type="text" name="" id="qw" /></td>
                          </tr>
                          <tr>
                            <td class="txt-right">XXX</td>
                            <td><input type="checkbox" id="" value="1" name="" checked=""></td>
                          </tr>
                          <tr>
                            <td class="txt-right">XXX XXX</td>
                            <td><input type="text" value="" name="" id="we" /></td>
                          </tr>
                        </table>
                        <!--tbl_equipment_details closed-->
                </div><!--div equipment_details closed-->
                    
                    <!--<div id="specifications" class="hide">-->
                    <div id="job_costs" class="hide">
                        <table border="0" cellspacing="1" cellpadding="2" width="100%" id="tbl_specifications">
                          <tr>
                            <td width="18%" class="txt-right">Notes</td>
                            <td colspan="2" valign="top">
                                <textarea rows="3" id="description"  cols="60" name=""></textarea>                    ...

CSS

body
{
    background: #fff;
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}

#info{
    width:768px;
    border: 1px solid #ccc;
      padding: 0 10px;
    background:#fff;
    float:left;
    margin-bottom:10px;
}
#info p {
  width: inherit;
  background-color: inherit;
}
#info-nav{
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}
#info-nav li{
    background: ##C3C3C3;
    border-bottom: 0;
    padding: 5px 10px;
    text-align:center;
    margin:0px;
    background:#ccc;
    float:left;
    margin-right:3px;
}

#info-nav li a
{
    color:#000;
    text-decoration:none;
    text-align:center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
}
#info-nav li.current{ 
    text-align:center;
    background:#000;
}

#info-nav li.current a
{
    color:#FFFFFF;
}

JavaScript

$(document).ready(function(){
  $( '#job_costs, #job_assignment' ).hide();
  
  $('#info-nav li').click(function(e) {
    $('#info .hide').hide();
    $('#info-nav .current').removeClass("current");
    $(this).addClass('current');
    
    var clicked = $(this).find('a:first').attr('href');
    $('#info ' + clicked).fadeIn('fast');
    e.preventDefault();
  }).eq(0).addClass('current');
});