JSFiddle - React, Tailwind, and code Playground

by paulftw

HTML

<div class=outer>

<div class="mock italy-map">
</div>

<div class="mock italy-reviews">
</div>

<div class="mock servr-search">
</div>

<div class="mock servr-profile">
</div>


</div>

CSS

.outer {background-color: #fff;}

.mock {
    display: inline-block;
    background-image: url('http://shop.mobine.ru/uploads/posts/2014-04/1398279540_iphone_4s_wite_2-.jpg');
    background-size: 100%;
    
    width: 500px;
    height: 900px;
    position: relative;
    transform-origin: 0 0;
    margin: -2px -30px -250px 1px;
    transform: scale(0.7);
}

.mock:after {
    content: " ";
    position: absolute;
    left: 63px;
    top: 183px;
    width: 372px;
    height: 557px;
    border-radius: 3px;
    background-size: 100%;
}

.mock.italy-reviews:after {
    background-image: url('https://lh3.googleusercontent.com/jDaBZFXkWduw9aKP6xMwxDu8DoGLCUB-tJ8jg5oHkwJXAMR293OLFgrUI0u69nwz16jZkC9FbZR0lPYNiNTHsvXcsw=w1416-h682');
}

.mock.italy-map:after {
    background-image: url('https://lh6.googleusercontent.com/FJCbiINLKVeaABp-lrDfbiBnsjn2B-__4fvK4NsBNSb_RtvdEbFuLW4lMh6IUXPq9NAqIWYKCx1Sv-ICJPKn6SFrYw=w1416-h682');
}

.mock.servr-search:after {
    background-image: url('https://lh3.googleusercontent.com/p8rVzFy-sy_khjUMD323FcA3OIpxEyRlGbHQehn1vEip2fKVcj_a7xxHMriZOnKc0bz0=w1416-h682');
}


.mock.servr-profile:after {
    background-image: url('https://lh3.googleusercontent.com/_lu9IZVPvXAPNhk_B39gpbzK8-NF0i0lu7l1KBEut0P2iMH_PQHgeITqqvgI22DSY_y3=w1416-h682');
}