<div data-content-type="html" data-appearance="default" data-element="main">&lt;!-- Tab for Desktop --&gt;
&lt;div x-data="{ activeTab: 'all' }" class=" mt-6 container desktop"&gt;
    &lt;!-- Tabs --&gt;
    &lt;div class="flex space-x-8 border-b border-gray-200"&gt;
        &lt;button @click="activeTab = 'all'" :class="{ 'border-b-2 border-blue-600': activeTab === 'all' }"
            class="px-3 py-2 text-sx  font-medium"&gt;
            All
        &lt;/button&gt;
        &lt;button @click="activeTab = 'payment'" :class="{ 'border-b-2 border-blue-600': activeTab === 'payment' }"
            class="px-3 py-2 text-sx  font-medium"&gt;
            Payment
        &lt;/button&gt;
        &lt;button @click="activeTab = 'order-info'" :class="{ 'border-b-2 border-blue-600': activeTab === 'order-info' }"
            class="px-3 py-2 text-sx  font-medium"&gt;
            Order Info
        &lt;/button&gt;
        &lt;button @click="activeTab = 'international-order'"
            :class="{ 'border-b-2 border-blue-600': activeTab === 'international-order' }"
            class="px-3 py-2 text-sx  font-medium"&gt;
            International Order
        &lt;/button&gt;
        &lt;button @click="activeTab = 'delivery-info'"
            :class="{ 'border-b-2 border-blue-600': activeTab === 'delivery-info' }"
            class="px-3 py-2 text-sx  font-medium"&gt;
            Delivery Information
        &lt;/button&gt;
        &lt;button @click="activeTab = 'product'" :class="{ 'border-b-2 border-blue-600': activeTab === 'product' }"
            class="px-3 py-2 text-sx  font-medium"&gt;
            Product
        &lt;/button&gt;
        &lt;button @click="activeTab = 'promotion'" :class="{ 'border-b-2 border-blue-600': activeTab === 'promotion' }"
            class="px-3 py-2 text-sx  font-medium"&gt;
            Promotion
        &lt;/button&gt;
        &lt;button @click="activeTab = 'trade'" :class="{ 'border-b-2 border-blue-600': activeTab === 'trade' }"
            class="px-3 py-2 text-sx  font-medium"&gt;
            Trade
        &lt;/button&gt;
        &lt;button @click="activeTab = 'returns'" :class="{ 'border-b-2 border-blue-600': activeTab === 'returns' }"
            class="px-3 py-2 text-sx  font-medium"&gt;
            Returns
        &lt;/button&gt;
    &lt;/div&gt;

    &lt;!-- Tab Content --&gt;
    &lt;div class="mt-4"&gt;
        &lt;div x-show="activeTab === 'all'"&gt;
            &lt;!-- Content for All Tab --&gt;
            {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="faq-all-tab-content"}}
        &lt;/div&gt;
        &lt;div x-show="activeTab === 'payment'"&gt;
            &lt;!-- Content for Payment Tab --&gt;
           {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="faq-payment-tab-content"}}
        &lt;/div&gt;
        &lt;div x-show="activeTab === 'order-info'"&gt;
            &lt;!-- Content for Order Info Tab --&gt;
          {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="Faq-order-info"}}
        &lt;/div&gt;
        &lt;div x-show="activeTab === 'international-order'"&gt;
            &lt;!-- Content for International Order Tab --&gt;
         {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="faq-International-order-tab"}}
        &lt;/div&gt;
        &lt;div x-show="activeTab === 'delivery-info'"&gt;
            &lt;!-- Content for Delivery Info Tab --&gt;
            {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="faq-delivery-option-tab"}}
        &lt;/div&gt;
        &lt;div x-show="activeTab === 'product'"&gt;
            &lt;!-- Content for Product Tab --&gt;
           {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="faq-product-tab-content"}}
        &lt;/div&gt;
        &lt;div x-show="activeTab === 'promotion'"&gt;
            &lt;!-- Content for Promotion Tab --&gt;
           {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="faq-promotion-tab-content"}}
        &lt;/div&gt;
        &lt;div x-show="activeTab === 'trade'"&gt;
            &lt;!-- Content for Trade Tab --&gt;
    {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="faq-trade-tab-content"}}
        &lt;/div&gt;
        &lt;div x-show="activeTab === 'returns'"&gt;
            &lt;!-- Content for Returns Tab --&gt;
           {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="faq-return-tab-content"}}
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Accordion for mobile --&gt;

&lt;div x-data="{ activeTab: 'all' }" class="mt-6 container mobile-faq"&gt;
    &lt;!-- Accordion for mobile --&gt;
    &lt;div class="block lg:hidden space-y-4"&gt;
        &lt;div x-data="{ open: false }" class="my-2 parent"&gt;
            &lt;button @click="open = !open" class="w-full flex justify-between items-center p-3 text-md rounded-lg border-2 border-gray-300"&gt;
            &lt;span class="font-semibold text-base text-gray-900"&gt;
                All
                &lt;/span&gt;
               &lt;span&gt;
    &lt;img x-bind:src="open ? '/media/wysiwyg/blue-minus-mobile-faq.svg' : '/media/wysiwyg/blue-plus-mobile-faq.svg'" 
         alt="Toggle Icon" 
         class="w-6 h-6 inline-block"&gt;
&lt;/span&gt;
            &lt;/button&gt;
            &lt;div x-show="open" x-collapse&gt;
                &lt;!-- Content for All Tab --&gt;
                {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="faq-all-tab-content"}}
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div x-data="{ open: false }" class="my-2 parent"&gt;
            &lt;button @click="open = !open" class="w-full flex justify-between items-center p-3 text-md rounded-lg border-2 border-gray-300"&gt;
            &lt;span class="font-semibold text-base text-gray-900"&gt;
                Payment
                &lt;/span&gt;
                &lt;span&gt;
    &lt;img x-bind:src="open ? '/media/wysiwyg/blue-minus-mobile-faq.svg' : '/media/wysiwyg/blue-plus-mobile-faq.svg'" 
         alt="Toggle Icon" 
         class="w-6 h-6 inline-block"&gt;
&lt;/span&gt;
            &lt;/button&gt;
            &lt;div x-show="open" x-collapse&gt;
                &lt;!-- Content for Payment Tab --&gt;
                {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="faq-payment-tab-content"}}
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div x-data="{ open: false }" class="my-2 parent"&gt;
            &lt;button @click="open = !open" class="w-full flex justify-between items-center p-3 text-md rounded-lg border-2 border-gray-300"&gt;
                &lt;span class="font-semibold text-base text-gray-900"&gt;
                Order Info
                &lt;/span&gt;
                &lt;span&gt;
    &lt;img x-bind:src="open ? '/media/wysiwyg/blue-minus-mobile-faq.svg' : '/media/wysiwyg/blue-plus-mobile-faq.svg'" 
         alt="Toggle Icon" 
         class="w-6 h-6 inline-block"&gt;
&lt;/span&gt;
            &lt;/button&gt;
            &lt;div x-show="open" x-collapse&gt;
                &lt;!-- Content for Order Info Tab --&gt;
                {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="Faq-order-info"}}
            &lt;/div&gt;
            
        &lt;/div&gt;

        &lt;div x-data="{ open: false }" class="my-2 parent"&gt;
            &lt;button @click="open = !open" class="w-full flex justify-between items-center p-3 text-md rounded-lg border-2 border-gray-300"&gt;
                &lt;span class="font-semibold text-base text-gray-900 text-gray-900"&gt;
                International Order
            &lt;/span&gt;
            &lt;span&gt;
    &lt;img x-bind:src="open ? '/media/wysiwyg/blue-minus-mobile-faq.svg' : '/media/wysiwyg/blue-plus-mobile-faq.svg'" 
         alt="Toggle Icon" 
         class="w-6 h-6 inline-block"&gt;
&lt;/span&gt;
            &lt;/button&gt;
            &lt;div x-show="open" x-collapse&gt;
                 &lt;!-- Content for International Order Tab --&gt;
         {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="faq-International-order-tab"}}
         &lt;/div&gt;
        &lt;/div&gt;

        &lt;div x-data="{ open: false }" class="my-2 parent"&gt;
            &lt;button @click="open = !open" class="w-full flex justify-between items-center p-3 text-md rounded-lg border-2 border-gray-300"&gt;
                &lt;span class="font-semibold text-base text-gray-900"&gt;Delivery information&lt;/span&gt;
               &lt;span&gt;
    &lt;img x-bind:src="open ? '/media/wysiwyg/blue-minus-mobile-faq.svg' : '/media/wysiwyg/blue-plus-mobile-faq.svg'" 
         alt="Toggle Icon" 
         class="w-6 h-6 inline-block"&gt;
&lt;/span&gt;
            &lt;/button&gt;
            &lt;div x-show="open" x-collapse&gt;
                &lt;!-- Content for Delivery Info Tab --&gt;
            {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="faq-delivery-option-tab"}}
        &lt;/div&gt;
        &lt;/div&gt;

        &lt;div x-data="{ open: false }" class="my-2 parent"&gt;
            &lt;button @click="open = !open" class="w-full flex justify-between items-center p-3 text-md rounded-lg border-2 border-gray-300"&gt;
                &lt;span class="font-semibold text-base text-gray-900"&gt;Product&lt;/span&gt;
                &lt;span&gt;
    &lt;img x-bind:src="open ? '/media/wysiwyg/blue-minus-mobile-faq.svg' : '/media/wysiwyg/blue-plus-mobile-faq.svg'" 
         alt="Toggle Icon" 
         class="w-6 h-6 inline-block"&gt;
&lt;/span&gt;
            &lt;/button&gt;
            &lt;div x-show="open" x-collapse&gt;
                 &lt;!-- Content for Product Tab --&gt;
           {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="faq-product-tab-content"}}
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;div x-data="{ open: false }" class="my-2 parent"&gt;
            &lt;button @click="open = !open" class="w-full flex justify-between items-center p-3 text-md rounded-lg border-2 border-gray-300"&gt;
                &lt;span class="font-semibold text-base text-gray-900"&gt;Promotion&lt;/span&gt;
                &lt;span&gt;
    &lt;img x-bind:src="open ? '/media/wysiwyg/blue-minus-mobile-faq.svg' : '/media/wysiwyg/blue-plus-mobile-faq.svg'" 
         alt="Toggle Icon" 
         class="w-6 h-6 inline-block"&gt;
&lt;/span&gt;
            &lt;/button&gt;
            &lt;div x-show="open" x-collapse&gt;
                &lt;!-- Content for Promotion Tab --&gt;
           {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="faq-promotion-tab-content"}}
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;div x-data="{ open: false }" class="my-2 parent"&gt;
            &lt;button @click="open = !open" class="w-full flex justify-between items-center p-3 text-md rounded-lg border-2 border-gray-300"&gt;
                &lt;span class="font-semibold text-base text-gray-900"&gt;Trade&lt;/span&gt;
              &lt;span&gt;
    &lt;img x-bind:src="open ? '/media/wysiwyg/blue-minus-mobile-faq.svg' : '/media/wysiwyg/blue-plus-mobile-faq.svg'" 
         alt="Toggle Icon" 
         class="w-6 h-6 inline-block"&gt;
&lt;/span&gt;
            &lt;/button&gt;
            &lt;div x-show="open" x-collapse&gt;
                &lt;!-- Content for Trade Tab --&gt;
    {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="faq-trade-tab-content"}}
        &lt;/div&gt;
        &lt;/div&gt;

        &lt;div x-data="{ open: false }" class="my-2 parent"&gt;
            &lt;button @click="open = !open" class="w-full flex justify-between items-center p-3 text-md rounded-lg border-2 border-gray-300"&gt;
                &lt;span class="font-semibold ttext-base text-gray-900"&gt;Returns&lt;/span&gt;
                &lt;span&gt;
    &lt;img x-bind:src="open ? '/media/wysiwyg/blue-minus-mobile-faq.svg' : '/media/wysiwyg/blue-plus-mobile-faq.svg'" 
         alt="Toggle Icon" 
         class="w-6 h-6 inline-block"&gt;
&lt;/span&gt;
            &lt;/button&gt;
            &lt;div x-show="open" x-collapse&gt;
                &lt;!-- Content for Returns Tab --&gt;
           {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="faq-return-tab-content"}}
        &lt;/div&gt;
        &lt;/div&gt;


    &lt;/div&gt;
&lt;/div&gt;
</div>