JSFiddle - React, Tailwind, and code Playground

HTML

<div id="genrepage">
    <div id="genres">
        <div id="genreselect"></div>
    </div>
    <div id="genretitle"></div>
</div>

CSS

#genreselect {
    position:fixed;
    width:142px;
    height:52px;
    background-image:url("https://dl.dropboxusercontent.com/u/20956652/samsung/kartina/mod/select_small.png");
    display:none;
    #box-shadow: 0 0px 50px #111;
}
.itemdummy {
    position:absolute;
    top:370px;
    width:100px;
    height:400px;
}
.genreitem {
    position:relative;
    width:120px;
    height:43px;
    float: left;
    margin:1px;
    #background-image:url("img/vod/vod_icon.png");
    #background-color:yellow;
    #box-shadow: inset 0 0 50px #111;
}
#genretitle {
    position:fixed;
    top: 393px;
    left: 350px;
    width:400px;
    height:60px;
    #background-color:red;
    color:black;
    text-align:center;
    font-size:2.5em;
    /*
    #text-shadow: 0px 55px 30px #fff;
    #text-shadow: 0 -1px 10px #FFFFFF, 0 1px 10px #666666;
    #text-shadow: 3px 3px 0 #707070, 5px 5px 0 #EEEEEE;

    
    text-shadow:
    0 -1px 10px rgba(255, 150, 0, 0.4),
    0 1px 10px rgba(255, 150, 0, 0.4),
    1px 1px 10px rgba(255, 150, 0, 0.4),
    -1px 0 10px rgba(255, 150, 0, 0.4),
    1px 0 10px rgba(255, 150, 0, 0.4);
    
    text-shadow: 0 5px 20px #111;
    */
    
    text-shadow:
1px 0px 1px #ccc, 0px 1px 1px #888,
2px 1px 1px #ccc, 1px 2px 1px #888,
3px 2px 1px #ccc, 2px 3px 1px #888,
4px 3px 1px #ccc, 3px 4px 1px #888,
5px 4px 1px #ccc;
}
.genreitemtext {
    position:absolute;
    text-align:center;
    width:112px;
    color:black;
    top:15px;
    #left:-15px;
    display:table-cell;
    font-size:0.8em;
}
.genreitemcount {
    position:absolute;
    text-align:center;
    width:138px;
    color:white;
    top:25px;
    #left:-15px;
    display:table-cell;
    font-size:1.2em;
}
#genres {
    position:fixed;
    left:258px;
    top:31px;
    width:610px;
    height:270px;
    overflow:hidden;
    padding:10px;
    #background-color:red;
}
#genrepage {
    position:fixed;
    margin:0;
    padding:0;
    top:0px;
    left:0px;
    height:540px;
    width:960px;
   ...

JavaScript

var selectCounter = 0;


var api = {
    "genres": [{
        "id": "204",
        "name": "\u0430\u043d\u0438\u043c\u0435"
    }, {
        "id": "205",
        "name": "\u0431\u0438\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439"
    }, {
        "id": "206",
        "name": "\u0431\u043e\u0435\u0432\u0438\u043a"
    }, {
        "id": "207",
        "name": "\u0432\u0435\u0441\u0442\u0435\u0440\u043d"
    }, {
        "id": "208",
        "name": "\u0432\u043e\u0435\u043d\u043d\u044b\u0439"
    }, {
        "id": "209",
        "name": "\u0434\u0435\u0442\u0435\u043a\u0442\u0438\u0432"
    }, {
        "id": "211",
        "name": "\u0434\u043b\u044f \u0432\u0437\u0440\u043e\u0441\u043b\u044b\u0445"
    }, {
        "id": "212",
        "name": "\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439"
    }, {
        "id": "213",
        "name": "\u0434\u0440\u0430\u043c\u0430"
    }, {
        "id": "214",
        "name": "\u0438\u0433\u0440\u0430"
    }, {
        "id": "215",
        "name": "\u0438\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0439"
    }, {
        "id": "216",
        "name": "\u043a\u043e\u043c\u0435\u0434\u0438\u044f"
    }, {
        "id": "217",
        "name": "\u043a\u043e\u043d\u0446\u0435\u0440\u0442"
    }, {
        "id": "218",
        "name": "\u043a\u043e\u0440\u043e\u0442\u043a\u043e\u043c\u0435\u0442\u0440\u0430\u0436\u043a\u0430"
    }, {
        "id": "219",
        "name": "\u043a\u0440\u0438\u043c\u0438\u043d\u0430\u043b"
    }, {
        "id": "220",
        "name": "\u043c\u0435\u043b\u043e\u0434\u0440\u0430\u043c\u0430"
    }, {
        "id": "221",
        "name": "\u043c\u0443\u0437\u044b\u043a\u0430"
    }, {
        "id": "222",
        "name": "\u043c\u0443\u0437\u044b\u043a\u0430\u043b\u044c\u043d\u044b\u0439"
    }, {
        "id": "254",
        "name": "\u043c\u0443\u043b\u044c\u0442\u0444\u0438\u043b\u044c\u043c"
    }, {
        "id":...