JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Demo</title>
<script src="https://unpkg.com/@paulandrewc/stencil-components/dist/stencil-components.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
  <div ng-app="sdiTriangleApp" ng-controller="sdiTriangleCtrl" >
  <div ng-controller="sdiTriangleCtrl"></div>
  <dashboard-element-container>
  <ternary-graph></ternary-graph>
  </dashboard-element-container>
  </div>
  <dashboard-element-container>
  <ternary-graph></ternary-graph>
  </dashboard-element-container>
  <!-- Updating the first triangle via Angular -->
  <style>
    body {
      margin: 0px;
      padding: 0px;
      font-family: sans-serif;
    }
  </style>
  <script>  
    var app = angular.module("sdiTriangleApp", []);
    app.controller("sdiTriangleCtrl", function($scope,$window) {
    
    //The Array Must Follow This Order to create a proper SDI Triangle.
    //Blue Green, Red, Name
      $scope.recordArray = 
      [
		{"A": 5, "B": 5, "C": 90, "Label": "Super Red"},
		{"A": 0,  "B": 0,  "C": 100,"Label": "Uber Red"},
		{"A": 90, "B": 5, "C": 5, "Label": "Super Blue"},
		{"A": 100,"B": 0,  "C": 0,  "Label": "Uber Blue"},
		{"A": 5, "B": 90, "C": 5, "Label": "Super Green"},
        {"A": 0,  "B": 100,"C": 0,  "Label": "Uber Green"}
	  ];
      
      $scope.Corners = {"A": {"X":10,"Y": 10},"B": {"X":50,"Y": 80},"C":{"X":90,"Y":10}};

      //This will currently only apply these to the first one it finds.
      const ternarygraph = document.querySelector('ternary-graph');
      ternarygraph.recordArray = $scope.recordArray;
      ternarygraph.corners = $scope.Corners;

    });
    </script>
</body>
</html>