JSFiddle - React, Tailwind, and code Playground

by W K

HTML

<body>
    <div class="wrapper">
        <div class="content">
            <div id="header">
                <div class="logo">
                    <img src="http://robertsspaceindustries.com/media/476e7fofpqtnjr/logo/STARGATE-Logo.png"></img>
                </div>
            </div>
            <div class="selDrop" id="wrapMinistry">
                 <h3>Ministry</h3>

                <select id="selectMinistry" onchange="selectMinistry()">
                    <option value="default">Select One</option>
                    <option>High Command</option>
                    <option>Ministry of Security</option>
                    <option>Ministry of Defense</option>
                    <option>Ministry of Interior</option>
                    <option>Ministry of State</option>
                </select>
                <div id="mIMG"></div>
            </div>
            <div class="selDrop" id="wrapDivision">
                 <h3>Division</h3>

                <select id="selectDivision" onchange="selectDivision()">
                    <option disabled="disabled">Select One</option>
                    <option value="security">Ministry of Security</option>
                    <option value="defense">Ministry of Defense</option>
                    <option value="interior">Ministry of Interior</option>
                    <option value="state">Ministry of State</option>
                </select>
                <div id="dIMG"></div>
            </div>
        </div>
    </div>
</body>

CSS

body {
}
#header {
    margin-left:auto;
    margin-right:auto;
    width:50%;
}
h3 {
    background:url("http://assets-cloud.enjin.com/themes/1375069661_tf.png");
    padding:10px;
    background-size:1500px;
    color:#29ccdb;
}
.wrapper {
    border-bottom-color: #0a2533;
    border-right-color: #0a2533;
    color:#cccccc;
    background-repeat: repeat;
    background-color: #060b14;
    background-position: top left;
    width:500px;
}
.content {
    background:url("http://assets-cloud.enjin.com/themes/1373784270_containerBG.png");
    padding:30px;
    min-height:700px;
}
.selDrop:before {
    background:url("http://assets-cloud.enjin.com/themes/1374385248_forumbread.png");
    width:50px;
    height:50px;
    display: block;
    content:"";
    float: left;
    position: relative;
    top: 49px;
    left: -37px;
}
select {
    border:1px solid #29ccdb;
    background-color:#060b14;
    color:#29ccdb;
    -webkit-appearance: none;
}
#mIMG, #dIMG {
    float:right;
    top: -30px;
    left:-80px;
    position: relative;
    border:1px solid #29ccdb;
    background-color:#060b14;
    padding:3px;
    z-index:101;
}
#wrapDivision, #mIMG, #dIMG {
    visibility:hidden;
    opacity:0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

JavaScript

var command = ["High Council"];
var security = ["Sentinel", "Intelligence"];
var defense = ["Marines", "Navy", "Reserve"];
var interior = ["Science & Industry", "Commerce & Trade", "Exploration & Infrastructure"];
var state = ["Diplomatic Corp", "Administration"];

var logoURL = "http://robertsspaceindustries.com/media/476e7fofpqtnjr/logo/STARGATE-Logo.png";
var mURL = "http://files.enjin.com/509268/art/Ministries/";
var dURL = "http://files.enjin.com/509268/art/Sectors/";
var ministryURLs = ["High%20Command/HighCommand100.png", "Ministry%20of%20Security/Security100.png", "Ministry%20of%20Defense/Defense100.png", "Ministry%20of%20the%20Interior/Interior100.png", "Ministry%20of%20State/State100.png"];
var comURL = ["High%20Council/HighCouncil100.png"];
var secURL = [];
var defURL = [];
var intURL = [];
var staURL = ["Diplomatic/Diplomatic100.png", "Administrative/Administrative100.png"];

var divisionURLs = [comURL, secURL, defURL, intURL, staURL];

var ministry = [command, security, defense, interior, state];

var dVisible = "hidden";
var dOpacity = 0;

var mSel, dSel;
var mWrap, dWrap;
var mVal, dVal;
var mIMG, dIMG;

function selectMinistry() {
    mVal = mSel.selectedIndex;
    if (mVal !== 0) {
        dVisible = "visible";
        dOpacity = 1;
        mIMG.innerHTML = "<img src='" + mURL + ministryURLs[mVal - 1] + "'></img>";
        mIMG.style.visibility = "visible";
        mIMG.style.opacity = 1;

        renderDivision();
    } else {
        dVisible = "hidden";
        dOpacity = 0;
        mIMG.innerHTML = "";
        mIMG.style.visibility = "hidden";
        mIMG.style.opacity = 0;
    }
    renderPage();
}

function selectDivision() {
    dVal = dSel.selectedIndex;

    if (dVal !== 0) {
        dIMG.innerHTML = "<img src='" + dURL + divisionURLs[mVal - 1][dVal - 1] + "'></img>";
        dIMG.style.visibility = "visible";
        dIMG.style.opacity = 1;
    } else {
        dIMG.innerHTML = "";
        dIMG.style.visibility = "hidden";
       ...