JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
<script src="https://rawgit.com/JoeHogan/angular-risk-matrix/master/dist/js/angular-risk-matrix.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <div style="width:300px;">
      <risk-matrix data="data.risks" likelihood="data.likelihoodValues" impact="data.impactValues" template="data.riskTemplate"></risk-matrix>
    </div>
    <div class="my-data">
      <div ng-repeat="r in data.risks | orderBy:'Id'">
        <span ng-bind="'Risk: '+r.Id"></span>
        <select ng-model="r.RiskLikelihood" ng-options="o as o for o in data.likelihoodValues"></select>
        <select ng-model="r.RiskImpact" ng-options="o as o for o in data.impactValues"></select>
      </div>
    </div>
  </div>
</div>

CSS

.risk-matrix {
  position: relative;
  width: 100%;
  margin-left: 20px;
  margin-bottom: 20px
}

.risk-matrix .left-label {
  position: absolute;
  font-size: 1.2em;
  font-weight: 700;
  bottom: 0;
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform-origin: left bottom 0;
  -webkit-transform-origin: left bottom 0;
  -ms-transform-origin: left bottom 0
}

.risk-matrix .bottom-label {
  position: absolute;
  font-size: 1.2em;
  font-weight: 700;
  bottom: -20px
}

.risk-matrix .risk-box {
  position: absolute;
  width: 19%;
  height: 19%;
  margin-right: 1%;
  margin-top: 1%
}

.risk-box.low-risk {
  background: rgba(153, 255, 51, .8);
  border: 1px solid rgba(153, 255, 51, 1)
}

.risk-box.medium-risk {
  background: rgba(255, 153, 51, .8);
  border: 1px solid rgba(255, 153, 51, 1)
}

.risk-box.high-risk {
  background: rgba(255, 51, 51, .8);
  border: 1px solid rgba(255, 51, 51, 1)
}

.risk-box.col-0 {
  left: 0
}

.risk-box.col-1 {
  left: 20%
}

.risk-box.col-2 {
  left: 40%
}

.risk-box.col-3 {
  left: 60%
}

.risk-box.col-4 {
  left: 80%
}

.risk-box.row-0 {
  top: 0
}

.risk-box.row-1 {
  top: 20%
}

.risk-box.row-2 {
  top: 40%
}

.risk-box.row-3 {
  top: 60%
}

.risk-box.row-4 {
  top: 80%
}

.risk-matrix .risk-matrix-item {
  border-radius: 50%;
  width: 8%;
  height: 8%;
  margin-left: -4%;
  margin-bottom: -4%;
  z-index: 1000;
  background: #fff;
  border: 1px solid #000;
  cursor: pointer;
  overflow: hidden;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  transition: all 1s ease
}

.risk-matrix .risk-matrix-item:hover {
  width: 50%;
  height: 50%;
  margin-left: -25%;
  margin-bottom: -25%;
  z-index: 2000;
  border-radius: 0;
  border: 1px solid #ddd
}

.risk-matrix .risk-matrix-item>div.open {
  padding: 5px;
  visibility: hidden;
  opacity: 0
}

.risk-matrix .risk-matrix-item:hover>div.open {
  visibility: visible;
  opacity: 1;
  -ms-transition: visibility 0s linear...

JavaScript

var app = angular.module("myApp", ['riskMatrix']);

app.controller("myCtrl", function($scope) {
  $scope.data = {};

  $scope.data.risks = [{
      Id: 1,
      Title: 'My First Risk',
      Description: 'Some description 1',
      RiskLikelihood: 'Low',
      RiskImpact: 'Low'
    },
    {
      Id: 2,
      Title: 'My Second Risk',
      Description: 'Some description 2',
      RiskLikelihood: 'Medium',
      RiskImpact: 'Medium'
    },
    {
      Id: 3,
      Title: 'My Third Risk',
      Description: 'Some description 3',
      RiskLikelihood: 'High',
      RiskImpact: 'Medium'
    },
    {
      Id: 4,
      Title: 'My Fourth Risk',
      Description: 'Some description 4',
      RiskLikelihood: 'Very Low',
      RiskImpact: 'Very High'
    }
  ];

  $scope.data.likelihoodValues = [
    'Very Low', 'Low', 'Medium', 'High', 'Very High'
  ];

  $scope.data.impactValues = [
    'Very Low', 'Low', 'Medium', 'High', 'Very High'
  ];

  $scope.data.riskTemplate = '<div class="closed"><span ng-bind="\'R\'+item.Id"></span></div><div class="open"><div class="title" ng-bind="item.Title"></div><div ng-bind="\'Likelihood: \'+item.RiskLikelihood"></div><div ng-bind="\'Impact: \'+item.RiskImpact"></div><div ng-bind="item.Description"></div></div>';

});