JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<div id="modal">
    <div id="window">
        <div class="separator header">
            <div id="window_close" on-click="close"></div>
            <div id="window_help" on-click="help"></div>
        </div>
        <div id="content"></div>
        <div class="separator"></div>
    </div>
</div>

CSS

#town-hall-content div.building {
    height: 200px;
    text-align: left;
    position: relative;
    clear: both;
    font-size: 12px;
    padding: 5px 0 0 0;
    margin: 0;
    color: #66400f;
}
#town-hall-content .hr {
    background: transparent url(http://static.tribul.net/game_images/layout/hr.png) no-repeat center center;
    height: 1px;
    padding: 0;
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
}
#town-hall-content div.building .image-container {
    padding: 0;
    position: absolute;
    top: 20px;
    left: 0px;
    width: 150px;
}
#town-hall-content div.building .image-container>.cover {
    position: absolute;
    left: 0;
    top: 0;
    background: transparent url(http://static.tribul.net/game_images/layout/building-mask.png) no-repeat 0 0;
    width: 150px;
    height: 150px;
    z-index: 4;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6);
}
#town-hall-content div.building .image-container>.blocking-text {
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
    height: 150px;
    z-index: 3;
}
#town-hall-content div.building .image-container>.blocking-text>.message {
    padding: 0 10px;
    position: relative;
    display: table-cell;
    text-align: center;
    width: 150px;
    height: 150px;
    vertical-align: middle;
    z-index: 2;
    line-height: 16px;
    color: #37302a;
    font-size: 11px;
}
#town-hall-content div.building .image-container>.blocking-text>.undercover {
    position: absolute;
    background: rgba(255, 223, 171, 0.7);
    left: 0;
    top: 0;
    width: 150px;
    height: 150px;
    z-index: 1;
}
#town-hall-content div.building .image-container>.undercover {
    position: absolute;
    left: 0;
    top: 0;
    background: transparent url(http://static.tribul.net/game_images/layout/grass.jpg) repeat;
    width: 150px;
    height: 150px;
    z-index: 1;
}
#town-hall-content div.building .image-container>.thumbnail {
    position: absolute;
    left: 0;
    top: 0;
    padding:...

JavaScript

var templates = {
    "building_1": "<div id=\"scroll-content\">\r\n\r\n\t<div id=\"town-hall-content\" class=\"tab-1\">\r\n\r\n\t\t<div class=\"tabs-content\">\r\n\t\t\t<div id=\"tab-content-1\" class=\"tab-content\">\r\n\t\t\t\t{{#config.buildings:building}}\r\n\t\t\t\t\t<div class=\"building category_{{category}}\" id=\"building-item-{{building}}\">\r\n\t\t\t\t\t\t<div class=\"image-container\">\r\n\t\t\t\t\t\t\t<div class=\"thumbnail\" style=\"background: transparent url({{staticUrl}}\/game_images\/town\/buildings\/{{building}}\/{{building}}-1-thumbnail.png) no-repeat center center;\"><\/div>\r\n\t\t\t\t\t\t\t<div class=\"cover\"><\/div>\r\n\t\t\t\t\t\t\t<div class=\"undercover\"><\/div><div class=\"level\">{{alreadyQueued(building)+village.buildings[building].level}}<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div class=\"big_title\">{{lang('buildings',building)}}<\/div>\r\n\t\t\t\t\t\t<p>{{lang('buildings',building+'_description')}}<\/p>\r\n\t\t\t\t\t\t<div on-click=\"upgradeBuilding:{{building}}\" class=\"upgrade-button\" tooltip=\"{{lang('general','upgrade_building')}}\"><\/div>\r\n\t\t\t\t\t\t<div on-click=\"downgradeBuilding:{{building}}\" class=\"downgrade-button disabled\" tooltip=\"{{lang('general','downgrade_building')}}\"><\/div>\r\n\t\t\t\t\t\t\t<div class=\"resources\">\r\n\t\t\t\t\t\t\t\t<div class=\"resource\">\r\n\t\t\t\t\t\t\t\t\t<img class=\"thumbnail\" src=\"{{staticUrl}}\/game_images\/resources\/woodB.png\">\r\n\t\t\t\t\t\t\t\t\t<label class=\"res-count-wood\">{{config.buildings[building][village.buildings[building].level +1+alreadyQueued(building,true)].wood}}<\/label>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"resource\">\r\n\t\t\t\t\t\t\t\t\t<img class=\"thumbnail\" src=\"{{staticUrl}}\/game_images\/resources\/ironB.png\">\r\n\t\t\t\t\t\t\t\t\t<label class=\"res-count-iron\">{{config.buildings[building][village.buildings[building].level+1...