seeds_tailwind-1.0.x-dev/components/sui_accordion/pattern-sui-accordion.html.twig

<div class="sui-accordione rounded-{{ props.raduis }} bg-white border border-[#E4E7EB] mb-4">
  {% if slots.title %}
    <div class="sui-accordione-title-wrapper group flex flex-wrap items-center cursor-pointer p-4">
      <div class="sui-accordione-title grow">{{ slots.title }}</div>
      <div class="sui-accordione-icon flex-[0_0_24px]">
        {% if props.icon_style == 'plus' %}
          <svg class="sui-accordione-plus-icon" width="24" height="24" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g id="Plus">
              <rect class="group-data-[open=true]:hidden" x="10" y="3" width="2" height="16" rx="1" fill="{{ props.icon_color }}" />
              <rect x="3" y="12" width="2" height="16" rx="1" transform="rotate(-90 3 12)" fill="{{ props.icon_color }}" />
            </g>
          </svg>
        {% endif %}
        {% if props.icon_style == 'arrow' %}
          <svg class="sui-accordione-arrow-icon duration-500 transition-all group-data-[open=true]:rotate-180" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g id="arrow-down">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M3.46967 7.46967C3.76256 7.17678 4.23744 7.17678 4.53033 7.46967L12 14.9393L19.4697 7.46967C19.7626 7.17678 20.2374 7.17678 20.5303 7.46967C20.8232 7.76256 20.8232 8.23744 20.5303 8.53033L12.5303 16.5303C12.2374 16.8232 11.7626 16.8232 11.4697 16.5303L3.46967 8.53033C3.17678 8.23744 3.17678 7.76256 3.46967 7.46967Z" fill="{{ props.icon_color }}" />
            </g>
          </svg>
        {% endif %}
      </div>
    </div>
  {% endif %}

  {% if slots.content %}
    <div class="sui-accordione-content mt-4 hidden p-4">
      {{ slots.content }}
    </div>
  {% endif %}
</div>