JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<div id="container">
    <div id="flow" ng-app="test" ng-controller="homeCtrl">
      <div class="hex-row">
          <div class="hex" ng-repeat="q in things" ng-click="selectThing(q)">
            <div class="top"></div>
            <div class="middle">{{q.id}}</div>
            <div class="bottom"></div>
          </div>
          <div class="hex small" ng-click="addGood()">
            <div class="top-small"></div>
            <div class="middle-small">+</div>
            <div class="bottom-small"></div>
          </div>
      </div>
      <div class="hex-row hex-even">
          <div class="hex" ng-class="{true:'small'}[q.bad==null]" ng-repeat="q in things" ng-click="selectThing(q.bad, q)">
            <div ng-class="{true:'top-small', false:'top'}[q.bad==null]"></div>
            <div ng-class="{true:'middle-small', false:'middle'}[q.bad==null]">{{ q.bad && q.bad.id || '+'}}</div>
            <div ng-class="{true:'bottom-small', false:'bottom'}[q.bad==null]"></div>
          </div>
      </div>
    </div>
</div>

CSS

#container {
    width: 500px;
	height: 250px;
	overflow-x: hidden;
}
#flow {
    width: 800px;
    height:100%;
}

.cover{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}.hex{float:left;margin-left:3px;margin-bottom:-26px;text-align:center;color:#fff;font-size:1.1rem}.hex:hover>.top{border-bottom:30px solid #bfb;cursor:pointer}.hex:hover>.top-small{border-bottom:10px solid #bfb;cursor:pointer}.hex:hover>.middle{background:#bfb;cursor:pointer}.hex:hover>.middle-small{background:#bfb;cursor:pointer}.hex:hover>.bottom{border-top:30px solid #bfb;cursor:pointer}.hex:hover>.bottom-small{border-top:10px solid #bfb;cursor:pointer}.hex .top{width:0;border-bottom:30px solid #6c6;border-left:52px solid transparent;border-right:52px solid transparent}.hex .top-small{width:0;border-bottom:10px solid #6c6;border-left:17.333333333333332px solid transparent;border-right:17.333333333333332px solid transparent}.hex .middle{width:104px;height:60px;background:#6c6}.hex .middle-small{width:35px;height:20px;background:#6c6}.hex .bottom{width:0;border-top:30px solid #6c6;border-left:52px solid transparent;border-right:52px solid transparent}.hex .bottom-small{width:0;border-top:10px solid #6c6;border-left:17.333333333333332px solid transparent;border-right:17.333333333333332px solid transparent}.small{margin:38px 35px 0 38px}.hex-row{clear:left;width:100%}.hex-row.hex-even{margin-left:53px}

JavaScript

var app = angular.module('test', []);

app.controller('homeCtrl', function ($scope) {
    var newId = 27;
    $scope.things = [
        {
            id: 1,
            bad: {id: 25},
            good: {id: 2},
        },{
            id: 2,
            bad: null,
            good: {id: 3}
        },{
            id: 3,
            bad: {id: 26},
            good: {id: 4}
        },
        {
            id: 4,
            bad: null,
            good: null
        },
    ];
        
    $scope.addGood = function () {
        var newThing = {id:newId++, bad: null, good: null};
    	var lastThing = $scope.things[$scope.things.length - 1];
    	lastThing.good = newThing;
    	$scope.things.push(newThing);
    
        var flow = document.getElementById('flow'),
            current_width = flow.clientWidth;
        flow.style.width = current_width + 104 + 'px';
    }

    var addBad = function(parent) {
    	parent.bad = {id: newId++};
    }

    $scope.selectThing = function(thing, parent) {
    	if (thing == null) {
    		addBad(parent);
    	} else {
    		$scope.currentThing = thing;
    	}
    }

});