JSFiddle - React, Tailwind, and code Playground

by elclanrs

HTML

<div class="sliced">
    <img src="http://i50.tinypic.com/210dieu.jpg" alt="" />
    <div class="tile a"></div>
    <div class="tile b"></div>
    <div class="tile c"></div>
    <div class="tile d"></div>
</div>

CSS

body { margin: 20px; }

.sliced {
    position: relative;
    width: 640px;
    height: 400px;
}
img { display: none; }

.tile {
    width: 320px; /* 640/2 */
    height: 200px; /* 400/2 */
    float: left;
    background: url(http://i50.tinypic.com/210dieu.jpg) no-repeat;
}

/* Play with these... */

.tile.a { background-position: 0 0 }
.tile.b { background-position: -320px 0; }
.tile.c { background-position: 0 -200px }
.tile.d { background-position: -320px -200px }