JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<?php
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("Вакансии");

use Bitrix\Main\Loader;
use Bitrix\Iblock\ElementTable;

if (!Loader::includeModule('iblock')) {
    ShowError("Модуль инфоблоков не установлен");
    return;
}

$vacancies = [];
$iblockId = 9; // Укажите ID вашего инфоблока

$arSelect = [
    "ID",
    "NAME",
    "PREVIEW_TEXT",
    "DETAIL_TEXT",
    "PROPERTY_MONEY",
    "PROPERTY_TIME_WORK",
    "PROPERTY_SKILL",
    "PROPERTY_ADD_INFO"
];

$arFilter = [
    "IBLOCK_ID" => $iblockId,
    "ACTIVE" => "Y"
];

$res = CIBlockElement::GetList([], $arFilter, false, false, $arSelect);
while ($arItem = $res->GetNext()) {
    $vacancies[] = [
        "ID" => $arItem["ID"],
        "NAME" => $arItem["NAME"],
        "PREVIEW_TEXT" => $arItem["PREVIEW_TEXT"],
        "DETAIL_TEXT" => $arItem["DETAIL_TEXT"],
        "MONEY" => $arItem["PROPERTY_MONEY_VALUE"],
        "TIME_WORK" => $arItem["PROPERTY_TIME_WORK_VALUE"],
        "SKILL" => $arItem["PROPERTY_SKILL_VALUE"],
        "ADD_INFO" => $arItem["PROPERTY_ADD_INFO_VALUE"]
    ];
}
?>

<div class="vacancies">
    <?php foreach ($vacancies as $vacancy): ?>
        <div class="accordion">
            <div class="accordion-header">
                <div class="image-placeholder"></div>
                <button class="grey__button button__text black__text">
                    <?= htmlspecialchars($vacancy['NAME']) ?>
                    <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.7524 16.2702L18.4024 10.6102C18.4962 10.5172 18.5706 10.4066 18.6213 10.2848C18.6721 10.1629 18.6982 10.0322 18.6982 9.90021C18.6982 9.76819 18.6721 9.63749 18.6213 9.51563C18.5706 9.39377 18.4962 9.28317 18.4024 9.19021C18.2151 9.00396 17.9616 8.89941 17.6974 8.89941C17.4333 8.89941 17.1798 9.00396 16.9924 9.19021L11.9924 14.1402L7.04244 9.19021C6.85508 9.00396 6.60163 8.89941 6.33744 8.89941C6.07326 8.89941...