Primer

HTML

<div class="inner">
	<div class="tabbed-header">
		<div class="inner">
		</div>
	</div>
	<div class="tabbed-container">

					<div class="tabbed__item" data-title="First">
				First content
			</div>
					<div class="tabbed__item" data-title="Second">
				Second content
			</div>
					<div class="tabbed__item" data-title="Third">
				Third content
			</div>
					<div class="tabbed__item" data-title="Fourth">
				Fourth content
			</div>
		
	</div>
</div>

Twig

<div class="inner">
	<div class="tabbed-header">
		<div class="inner">
		</div>
	</div>
	<div class="tabbed-container">

		{% for tab in tabs %}
			<div class="tabbed__item" data-title="{{ tab.title }}">
				{{ tab.content }}
			</div>
		{% endfor %}

	</div>
</div>

{
    "tabs": {
        "0": {
            "title": "First",
            "content": "First content"
        },
        "1": {
            "title": "Second",
            "content": "Second content"
        },
        "2": {
            "title": "Third",
            "content": "Third content"
        },
        "3": {
            "title": "Fourth",
            "content": "Fourth content"
        }
    }
}

First content

Second content

Third content

Fourth content