JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css">
<div id="tab-wrap" class="bike">
    
    <div id="batter-finder">
        <h1>Battery Finder</h1>
        <p>Choose Your Application then find your battery</p>
        
        <div id="tabs">
            <ul>
                <li><a href="#bike">Bike</a></li>
                <li><a href="#atv">ATV</a></li>
                <li><a href="#utv">UTV</a></li>
                <li><a href="#snow">Snow</a></li>
                <li><a href="#water">Water</a></li>
            </ul>
            
            <div id="bike">
                <p>Bike content</p>
            </div>
            
            <div id="atv">
                <p>ATV content</p>
            </div>
            
            <div id="utv">
                <p>UTV content</p>
            </div>
            
            <div id="snow">
                <p>Snow content</p>
            </div>
            
            <div id="water">
                <p>Water content</p>
            </div>
            
        </div> <!-- /tabs -->
        
    </div>
    
</div>

CSS

#tab-wrap.bike {
    background: red;
}
#tab-wrap.atv{
    background: blue;
}
#tab-wrap.utv {
    background: yellow;
}
#tab-wrap.snow {
    background: green;
}
#tab-wrap.water{
    background: #fff;
}

JavaScript

$("#tabs").tabs({ 
    fx: { height: 'toggle', opacity: 'toggle' },
    select: function(event, ui) {
         $("#tab-wrap").attr('class', ui.panel.id);
    }
});