JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<div ng-app="europaMeisterschaft">

  <body ng-controller="InhaltController as inhalt">
    <nav class="navbar navbar-inverse hover">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="index.html">EM Planer</a>
        </div>
        <ul class="nav navbar-nav">
          <li><a href ng-click="inhalt.setInhalt(1)">Home</a></li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href>Gruppen <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li>
                <a href="#gruppea" ng-click="inhalt.setInhalt(2)">Gruppe A</a>
              </li>
              <li>
                <a href="#gruppeb" ng-click="inhalt.setInhalt(3)">Gruppe B</a>
              </li>
              <li>
                <a href="#gruppec" ng-click="inhalt.setInhalt(4)">Gruppe C</a>
              </li>
              <li>
                <a href="#grupped" ng-click="inhalt.setInhalt(5)">Gruppe D</a>
              </li>
              <li>
                <a href="#gruppee" ng-click="inhalt.setInhalt(6)">Gruppe E</a>
              </li>
              <li>
                <a href="#gruppef" ng-click="inhalt.setInhalt(7)">Gruppe F</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Runden <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a onclick="ko(8)" href="#runde">Achtelfinale</a></li>
              <li><a onclick="ko(4)" href="#runde">Viertelfinale</a></li>
              <li><a onclick="ko(2)" href="#runde">Halbfinale</a></li>
              <li><a onclick="ko(1)" href="#runde">Finale</a></li>
            </ul>
          </li>
          <li><a onclick="mannschaft()" href="#mannschaften">Mannschaften</a></li>
        </ul>
      </div>
    </nav>
    <div class="body">
      <div...

JavaScript

(function() {
  var app = angular.module('europaMeisterschaft', ['gruppen-directives']);

  app.controller('InhaltController', function() {
    this.inhalt = 1;

    this.setInhalt = function(newValue) {
      this.inhalt = newValue;
    };

    this.isInhalt = function(inhaltName) {
      return this.inhalt === inhaltName;
    };
  });
  app.directive("gruppeA", function() {
    return {
      restrict: "E",
      templateUrl: "../html/gruppe-a.html",
      controller: function() {
        this.gruppe = gruppea;
        this.tabelle = mannschaft;
      },
      controllerAs: "gruppea"
    };
  });


  var gruppea = [{
    anstoss: "Fr 10.06. 21:00",
    ort: "Paris St. Denis",
    heim: "Frankreich",
    gast: "Rumänien",
    ergebnis: "2:1 (0:0)"
  }, {
    anstoss: "Sa 11.06. 15:00",
    ort: "Lens",
    heim: "Albanien",
    gast: "Schweiz",
    ergebnis: "0:1 (0:1)"
  }, {
    anstoss: "Mi 15.06. 18:00",
    ort: "Paris",
    heim: "Rumänien",
    gast: "Schweiz",
    ergebnis: "1:1 (1:1)"
  }, {
    anstoss: "Mi 15.06. 21:00",
    ort: "Marseille",
    heim: "Frankreich",
    gast: "Albanien",
    ergebnis: "2:0 (0:0)"
  }, {
    anstoss: "So 19.06. 21:00",
    ort: "Lille",
    heim: "Schweiz",
    gast: "Frankreich",
    ergebnis: "0:0 (0:0)"
  }, {
    anstoss: "So 19.06. 21:00",
    ort: "Lyon",
    heim: "Rumänien",
    gast: "Albanien",
    ergebnis: "0:1 (0:1)"
  }];

  var mannschaft = [{
    team: " Frankreich",
    platz: "1",
    spiele: "3",
    gewonnen: "2",
    remis: "1",
    verloren: "0",
    tore: "4:1",
    diff: "3",
    punkte: "7"
  }, {
    team: " Schweiz",
    platz: "2",
    spiele: "3",
    gewonnen: "1",
    remis: "2",
    verloren: "0",
    tore: "2:1",
    diff: "1",
    punkte: "5"
  }, {
    team: " Albanien",
    platz: "3",
    spiele: "3",
    gewonnen: "1",
    remis: "0",
    verloren: "2",
    tore: "1:3",
    diff: "-2",
    punkte: "3"
  }, {
    team: " Rumänien",
    platz: "4",
    spiele: "3",
    gewonnen:...