<section class="trending-products-three py-120 overflow-hidden">
    <div class="container container-lg">
        <div class="section-heading mb-24">
            <div class="flex-between flex-wrap gap-8">
                <h5 class="mb-0 text-uppercase">Trending Products</h5>
                <ul class="nav common-tab style-two nav-pills" id="pills-tab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link bt-tb-btn active" id="pills-sale-tab" data-bs-toggle="pill"
                            data-bs-target="#pills-sale" type="button" role="tab">On Sale</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link bt-tb-btn" id="pills-featured-tab" data-bs-toggle="pill"
                            data-bs-target="#pills-featured" type="button" role="tab">Featured Products</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link bt-tb-btn" id="pills-rated-tab" data-bs-toggle="pill"
                            data-bs-target="#pills-rated" type="button" role="tab">Best Rated</button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade bt-tab-pane show active uppercase" id="pills-sale" role="tabpanel" tabindex="0">
                <div class="row g-12" id="saleProducts"></div>
            </div>
            <div class="tab-pane fade bt-tab-pane" id="pills-featured" role="tabpanel" tabindex="0">
                <div class="row g-12" id="featuredProducts"></div>
            </div>
            <div class="tab-pane fade bt-tab-pane" id="pills-rated" role="tabpanel" tabindex="0">
                <div class="row g-12" id="ratedProducts"></div>
            </div>
        </div>
    </div>
</section>