JSFiddle - React, Tailwind, and code Playground
by Sergey khorev
HTML
<section id="FAQ" class="faq__block mt-64">
<h3 class="title">Часто задаваемые вопросы</h3>
<div class="faq_block__content_wrapper">
<div class="faq_block__content_wrapper">
<div class="flex__wrapper_small mt-32">
<button class="faq__switch_button faq__switch_button_active" data-target="bonuses-faq">
<img src="/local/templates/food/img/faqbutton1.svg" class="faq__switch_button_img invert_img">Бонусы
</button>
<button class="faq__switch_button" data-target="weight_loss">
<img src="/local/templates/food/img/faqbutton2.svg" class="faq__switch_button_img">Питание
</button>
<button class="faq__switch_button" data-target="products">
<img src="/local/templates/food/img/faqbutton3.svg" class="faq__switch_button_img">Продукты
</button>
<button class="faq__switch_button" data-target="tariffs">
<img src="/local/templates/food/img/faqbutton4.svg" class="faq__switch_button_img">Тарифы
</button>
<button class="faq__switch_button" data-target="payment">
<img src="/local/templates/food/img/faqbutton5.svg" class="faq__switch_button_img">Оплата
</button>
<button class="faq__switch_button" data-target="delivery">
<img src="/local/templates/food/img/faqbutton6.svg" class="faq__switch_button_img">Доставка
</button>
<button class="faq__switch_button" data-target="storage">
<img src="/local/templates/food/img/faqbutton7.svg" class="faq__switch_button_img">Хранение
</button>
</div>
<div class="accordion__wrapper mt-32">
<!-- Блок контента для Бонусов -->
<div class="accordion_content" id="bonuses-faq">
<div class="accordion active">
<button class="grey__button button__text black__text">Что такое бонусы?
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.7524...