Tabs

<div class="mp c-tabs c-tabs--anchor">
<nav class="c-tabs__controls ">
  <ul class="c-tabs__controls-list">
    <li><a class="c-tabs__control c-tabs__control--active" href="#tab-1">Primary materials</a></li>
    <li><a class="c-tabs__control " href="#tab-2">Pharmaceuticals</a></li>
    <li><a class="c-tabs__control " href="#tab-3">Advanced materials</a></li>
    <li><a class="c-tabs__control " href="#tab-4">Academia</a></li>
    <li><a class="c-tabs__control " href="#tab-5">Connected world</a></li>
  </ul>
</nav>
<div class="c-tabs__content">
<div id="tab-1" class="c-tab c-tab--active">
<div class="o-prose"><p><strong>Primary materials</strong> lorem ipsum a maecenas parturient ipsum at nisl id nisi a imperdiet platea dui venenatis sit euismod.</p></div>
</div>
<div id="tab-2" class="c-tab ">
<div class="o-prose"><p><strong>Pharmaceuticals</strong> lorem ipsum parturient a ullamcorper nisl parturient cum ullamcorper augue arcu a feugiat mus imperdiet curae suspendisse rhoncus sit id parturient cubilia adipiscing ad ullamcorper aliquet mi.</p></div>
</div>
<div id="tab-3" class="c-tab ">
<div class="o-prose"><p><strong>Advanced materials</strong> lorem ipsum fringilla eros cum facilisis id ullamcorper pretium sociosqu a eu vestibulum cras vivamus inceptos sed potenti a.</p></div>
</div>
<div id="tab-4" class="c-tab ">
  <div class="o-prose"><p><strong>Academia</strong> lorem ipsum augue et vestibulum ut luctus ut vestibulum proin eros mauris sodales penatibus euismod a sem eleifend suspendisse litora fringilla habitasse suspendisse.</p></div>
  </div>
  <div id="tab-5" class="c-tab ">
    <div class="o-prose"><p><strong>Connected world</strong> lorem ipsum eros a parturient libero ullamcorper natoque vestibulum turpis egestas suspendisse parturient et adipiscing arcu a.</p></div>
    </div>
  </div>
</div>

{
  "type": "anchor",
  "tabs": [
    {
      "id": "tab-1",
      "label": "Primary materials",
      "content": "<strong>Primary materials</strong> lorem ipsum a maecenas parturient ipsum at nisl id nisi a imperdiet platea dui venenatis sit euismod.",
      "active": true
    },
    {
      "id": "tab-2",
      "label": "Pharmaceuticals",
      "content": "<strong>Pharmaceuticals</strong> lorem ipsum parturient a ullamcorper nisl parturient cum ullamcorper augue arcu a feugiat mus imperdiet curae suspendisse rhoncus sit id parturient cubilia adipiscing ad ullamcorper aliquet mi."
    },
    {
      "id": "tab-3",
      "label": "Advanced materials",
      "content": "<strong>Advanced materials</strong> lorem ipsum fringilla eros cum facilisis id ullamcorper pretium sociosqu a eu vestibulum cras vivamus inceptos sed potenti a."
    },
    {
      "id": "tab-4",
      "label": "Academia",
      "content": "<strong>Academia</strong> lorem ipsum augue et vestibulum ut luctus ut vestibulum proin eros mauris sodales penatibus euismod a sem eleifend suspendisse litora fringilla habitasse suspendisse."
    },
    {
      "id": "tab-5",
      "label": "Connected world",
      "content": "<strong>Connected world</strong> lorem ipsum eros a parturient libero ullamcorper natoque vestibulum turpis egestas suspendisse parturient et adipiscing arcu a."
    }
  ]
}