Dynamic Product Info Tabs

                <!-- Add Phosphor Icons -->
<script src="https://unpkg.com/@phosphor-icons/web"></script>
 
<style>
    .tabs {
        width: 100%;
        background: #fff;
        border-radius: 8px;
        box-shadow: 5px 7px 20px 0px #0000000d;
        overflow: hidden;
    }

    .tab-header {
        display: flex;
        background: #FFD940;
        color: #000000;
    }

    .tab-header div {
        flex: 1;
        text-align: center;
        padding: 12px;
        cursor: pointer;
        font-size: 14px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px; /* Space between icon & text */
        border-bottom: 3px solid transparent;
        transition: background 0.3s ease, border-bottom 0.3s ease;
    }

    .tab-header div.active {
        background: #000000;
        border-bottom: 3px solid #ffd940;
        color: #fff;
    }

    .tab-content {
        padding: 25px 35px;
        display: none;
    }

    .tab-content.active {
        display: block;
    }

    /* Phosphor Icons Styling */
    .tab-header div i {
        font-size: 20px;
        color: inherit;
    }

    /* Mobile: Stack Icons Above Text */
    @media (max-width: 500px) {
        .tab-header div {
            flex-direction: column;
            font-size: 12px;
        }
        .tab-header div i {
            font-size: 18px; /* Slightly smaller icons for mobile */
        }
        .tab-content {
            padding: 15px 15px;
        }
    }
</style>

<div class="tabs">
    <div class="tab-header">
        <div class="active" onclick="openTab(event, 'description')">
            <i class="ph ph-file-text"></i>
            <span>Description</span>
        </div>
        <div onclick="openTab(event, 'shipping')">
            <i class="ph ph-truck"></i>
            <span>Shipping</span>
        </div>
        <div onclick="openTab(event, 'material')">
            <i class="ph ph-wrench"></i>
            <span>Material</span>
        </div>
    </div>
    <div class="tab-content active" id="description">
        <p>This chair combines modern design with exceptional comfort, making it a perfect addition to any space. With an ergonomic backrest and a well-cushioned seat, it provides the support needed for extended sitting. Whether used for work, dining, or relaxation.</p>
    </div>
    <div class="tab-content" id="shipping">
        <p>We ensure fast and secure shipping within 3-5 business days. Each chair is carefully packaged to prevent damage during transit. Free shipping is available for select regions, and tracking details will be provided once your order is dispatched.</p>
    </div>
    <div class="tab-content" id="material">
        <p>Made from high-quality materials, this chair features a solid wood or reinforced metal frame for durability. The seat is padded with high-density foam and upholstered in premium fabric, leather, or vegan leather for a soft yet supportive feel.</p>
    </div>
</div>

<script>
    function openTab(event, tabName) {
        let tabs = document.querySelectorAll('.tab-content');
        let headers = document.querySelectorAll('.tab-header div');

        tabs.forEach(tab => tab.classList.remove('active'));
        headers.forEach(header => header.classList.remove('active'));

        document.getElementById(tabName).classList.add('active');
        event.currentTarget.classList.add('active');
    }
</script>