JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<div ng-app="app" ng-controller="MainController">
    <form>
        <h4>Choose the top type:</h4>
        
        <select ng-model="topType"
        ng-options="top.type as top.type for top in tops | unique: 'type'">
        </select>
        
        <h4>Choose the top color:</h4>
        
        <select ng-model="topColor"
        ng-options="top.color as top.color for top in tops | unique: 'color'">
        </select>
        
        <h4>Choose the bottom type:</h4>
        
        <select ng-model="bottomType"
        ng-options="bottom.type as bottom.type for bottom in bottoms | unique: 'type'">
        </select>
        
        <h4>Choose the bottom color:</h4>
        
        <select ng-model="bottomColor"
        ng-options="bottom.color as bottom.color for bottom in bottoms | unique: 'color'">
        </select>
        
        <h4>Choose the entrance color:</h4>
        
        <select ng-model="entranceColor"
        ng-options="entrance.color as entrance.color for entrance in entrances | unique: 'color'">
        </select>
    </form>
    
    <div class="house">
        <div class="top">
            <img ng-src="{{ getCurrentTopImage() }}" />
        </div>
        
        <div class="entrance">
            <img ng-src="{{ getCurrentEntranceImage() }}" />
        </div>
        
        <div class="bottom">
            <img ng-src="{{ getCurrentBottomImage() }}" />
        </div>
    </div>
</div>

CSS

.house {
    width: 100px;
    height: 90px;
    
    position: relative;
}

.house .top {
    position: absolute;
    top: 0px;
    
    z-index: 2;
}

.house .entrance {
    position: absolute;
    bottom: 0px;
    
    z-index: 3;
}

.house .bottom {
    position: absolute;
    bottom: 0px;
    
    z-index: 1;
}

img {
    width: 80px;
    height: 80px;
}

JavaScript

//Author: Stefan Moraru.
var app = angular.module('app', ['ui.filters']);

function MainController($scope) {
    function Shape(type, imageSrc, color) {
        this.type = type;
        this.imageSrc = imageSrc;
        this.color = color;
    };
    
    var tops =
    [
        new Shape("Triangle", "http://i.stack.imgur.com/wkRaA.png", "Blue"),
        new Shape("Triangle", "http://i.stack.imgur.com/lHk5X.png", "Green"),
        new Shape("Triangle", "http://i.stack.imgur.com/LT6Nn.png", "Red"),
        new Shape("Octagonal", "http://i.stack.imgur.com/FjF7S.png", "Red"),
        new Shape("Octagonal", "http://i.stack.imgur.com/0FWGv.png", "Blue"),
        new Shape("Octagonal", "http://i.stack.imgur.com/92kyY.png", "Green")
    ];
    
    var bottoms =
    [
        new Shape("Rectangle", "http://i.stack.imgur.com/7P8Ua.png", "Blue"),
        new Shape("Rectangle", "http://i.stack.imgur.com/h2Bpc.png", "Green"),
        new Shape("Rectangle", "http://i.stack.imgur.com/jAX1y.png", "Red")
    ];
    
    var entrances =
    [
        new Shape("Normal", "http://i.stack.imgur.com/jehkB.png", "Blue"),
        new Shape("Normal", "http://i.stack.imgur.com/CgYnh.png", "Green"),
        new Shape("Normal", "http://i.stack.imgur.com/lHbKP.png", "Red")
    ];
    
    $scope.tops = tops;
    $scope.topColor = $scope.tops[0].color;
    $scope.topType = $scope.tops[0].type;
    
    $scope.bottoms = bottoms;
    $scope.bottomColor = $scope.bottoms[0].color;
    $scope.bottomType = $scope.bottoms[0].type;
    
    $scope.entrances = entrances;
    $scope.entranceColor = $scope.entrances[0].color;
    $scope.entranceType = $scope.entrances[0].type;
    
    $scope.getCurrentTopImage = getCurrentTopImage;
    $scope.getCurrentBottomImage = getCurrentBottomImage;
    $scope.getCurrentEntranceImage = getCurrentEntranceImage;
        
    function getCurrentTop() {
        return _.find($scope.tops, { color: $scope.topColor, type: $scope.topType }) || {};
    }
    
   ...