JSFiddle - React, Tailwind, and code Playground

by will525

HTML

<div class="productInfo newLayout">
<div class="tabOuterContainer">
<ul class="tabs">
<li class="" style=""><a class="description active" href="#tab1">Product Info</a></li>
<li class=""><a class="desc" href="#tab2">Delivery</a></li>
<li class="active"><a class="desc" href="#tab3">Returns</a></li>
</ul>
<div class="tabContainer">
<div id="tab1" class="tabContent" style="display: none; ">
    <p> hello </p>    
</div>
<div id="tab2" class="tabContent" style="display: none; ">
    <p> Goodbye </p> 
</div>
<div id="tab3" class="tabContent" style="display: block; ">
    <p> Thankyou </p> 
</div>
    
</div>
</div>
</div>
</div>

CSS

.productInfo .productLogo{float:right;padding:5px 0 0}
.productInfo .bC{height:37px;line-height:37px;overflow:hidden}
.productInfo .bC .productLogo{float:left;padding:0}
.productInfo .bC .bL{color:#1c1c1c;font-size:11px;text-decoration:none}
.productInfo .bC .bL:hover{text-decoration:underline}
.productInfo .bC .bL span{color:#777;font-family:Webdings;font-size:11px}
.productInfo h1{color:#1c1c1c;font-size:13px;font-weight:bold}
.productInfo h4{color:#1c1c1c;font-size:12px;font-weight:normal;margin:10px 0 5px}
.productInfo .pricingAlign{color:#1c1c1c;font-size:13px;margin:13px 0;overflow:hidden;width:130px}
.productInfo .pricingAlign span{float:left}
.productInfo span.pWas{float:right;font-weight:bold;width:95px}
.productInfo span.pNow{color:#f00;float:right;font-weight:bold;width:95px}
.newLayout span.pWas{float:right;font-weight:normal;display:block;text-decoration:line-through}
.newLayout span.pNow{float:right;color:#000;font-size:13px;font-weight:bold}
.newLayout .aAvailProd .aAvailTitle span.pNow{font-size:13px}
.newLayout span.pSave{float:right;color:#f00;font-size:11px;font-weight:normal}
.productInfo .pAttributes{display:block}
.productInfo .dottedBorder{border-bottom:1px dotted #777;border-top:1px dotted #777;line-height:14px;margin:10px 0 5px;padding:10px 0}
.productInfo ul.featureCat{display:inline-block;list-style:none;margin:5px 2px;overflow:hidden}
.productInfo ul.featureCat li{list-style:none;border-left:none}
.productInfo ul.features{margin:5px 2px;overflow:hidden;padding:0}
.productInfo ul.features li{border-left:1px solid #777;float:left;list-style:none;margin:0 5px 0 0;padding:0 0 0 5px}
.productInfo ul.features li:first-child{border-left:none;padding-left:0;margin-left:0}
.productInfo .sprite{background:url(/images/static/productpage/productpage-sprite.png) no-repeat}
.productInfo .shareBar{bottom:0;left:-20px;position:absolute;width:450px}
.productInfo .shareBar #gbtn{float:left}
.productInfo .addWishlist{background-position:0...

JavaScript

(function ($) {

    // Common scripts that run as soon as the page loads

    SetupTabs();                        // Generic (tabs can be used anywhere)
  
})(this.jQuery);


function SetupTabs() {
    try {
        // Tabs code
        $(".tabContent, .tab_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tabContent:first").show(); //Show first tab content
        $(".tab_content:first").show(); //Show first tab content

        $("ul.tabs li a").live('click', function () {
            $(this).parents('ul.tabs').children('li').removeClass('active'); //Remove any "active" class
            //$("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).parent('li').addClass("active"); //Add "active" class to selected tab
            $(this).parents('ul.tabs').parent().find(".tabContent").hide(); //Hide all tab content
            $(this).parents('ul.tabs').parent().find(".tab_content").hide(); //Hide all tab content
            var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content
            $(activeTab).fadeIn('fast'); //Fade in the active ID content
            return false;
        });
    }
    catch (err) { }
}