JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<div class='map'>
    <div class='object house' x='1' y='1'></div>
    <div class='object house' x='2' y='1'></div>
    <div class='object house' x='3' y='2'></div>
    <div class='object villa' x='4' y='3'></div>
    <div class='object bungalow' x='1' y='3'></div>
    
    <div class='object tree' x='3' y='1'></div>
    <div class='object tree' x='4' y='1'></div>
    <div class='object tree' x='4' y='2'></div>
    <div class='object tree' x='2' y='3'></div>
    <div class='object tree' x='1' y='4'></div>
</div>

CSS

.map{
    position: relative;
    width: 400px;
    height: 400px;
    background: #3D870F url(http://goo.gl/cMUhrI);
}

.object{
    position: absolute;
    width: 100px;
    height: 100px;
    background-size: cover;
}

.house{
    background-image: url(http://goo.gl/3JPC08);
}

.villa{
    background-image: url(http://goo.gl/2vpNei);
}

.bungalow{
    background-image: url(http://goo.gl/gIowcO);
}

.tree{
    background-image: url(http://goo.gl/DX2Mmt);
}

JavaScript

$(function(){
    $('.object').each(function(){
        var $this = $(this);
        var x = parseInt($this.attr('x'), 10) - 1;
        var y = parseInt($this.attr('y'), 10) - 1;
        $this.css({
            left: (x * 100),
            top: (y * 100) 
        });
    });
});