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>
    <form>
        <h4>Choose the top type:</h4>
        
        <input type="radio" id="TopTriangle" name="TopShape" value="Triangle" checked/>Triangle 
        <input type="radio" id="TopOctogon" name="TopShape" value="Octogon"/>Octogon
        
        <h4>Choose the top color:</h4>
        
        <input type="radio" id="TopBlue" name="TopColor" value="Blue" checked/>Blue
        <input type="radio" id="TopGreen" name="TopColor" value="Green"/>Green
        <input type="radio" id="TopRed" name="TopColor" value="Red"/>Red
        
        <h4>Choose the bottom type:</h4>
        
        <input type="radio" id="BotRect" name="BotShape" value="Rectangle" checked />Rectangle
        
        <h4>Choose the bottom color:</h4>
        
        <input type="radio" id="BotBlue" name="BotColor" value="Blue"/>Blue
        <input type="radio" id="BotGreen" name="BotColor" value="Green" checked/>Green
        <input type="radio" id="BotRed" name="BotColor" value="Red"/>Red
        
        <h4>Choose the entrance color:</h4>
        
        <input type="radio" id="EntBlue" name="EntColor" value="Blue"/>Blue
        <input type="radio" id="EntGreen" name="EntColor" value="Green"/>Green
        <input type="radio" id="EntRed" name="EntColor" value="Red" checked/>Red
        
     <div class="house">
        <div class="top">
            <img class="blue triangle" src="http://i.stack.imgur.com/wkRaA.png" />
            <img class="green triangle" src="http://i.stack.imgur.com/lHk5X.png" />
            <img class="red triangle" src="http://i.stack.imgur.com/LT6Nn.png" />
            <img class="blue octogon" src="http://i.stack.imgur.com/0FWGv.png" />
            <img class="green octogon" src="http://i.stack.imgur.com/92kyY.png" />
            <img class="red octogon"...

CSS

.house {
    width: 100px;
    height: 80px;    
    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;
}

.house img {
    display: none; /* default hide all */
}

#TopTriangle:checked ~ #TopBlue:checked ~ .house > .top > .blue.triangle { display: block;}
#TopTriangle:checked ~ #TopGreen:checked ~ .house > .top > .green.triangle { display: block;}
#TopTriangle:checked ~ #TopRed:checked ~ .house > .top > .red.triangle { display: block;}
#TopOctogon:checked ~ #TopBlue:checked ~ .house > .top > .blue.octogon { display: block;}
#TopOctogon:checked ~ #TopGreen:checked ~ .house > .top > .green.octogon { display: block;}
#TopOctogon:checked ~ #TopRed:checked ~ .house > .top > .red.octogon { display: block;}

#BotRect:checked ~ #BotBlue:checked ~ .house > .bottom > .blue.rect { display: block;}
#BotRect:checked ~ #BotGreen:checked ~ .house > .bottom > .green.rect { display: block;}
#BotRect:checked ~ #BotRed:checked ~ .house > .bottom > .red.rect { display: block;}

#EntBlue:checked ~ .house > .entrance > .blue { display: block;}
#EntGreen:checked ~ .house > .entrance > .green { display: block;}
#EntRed:checked ~ .house > .entrance > .red { display: block;}