JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio expedita iste voluptates unde veniam quae illo eius maiores debitis quasi! Sunt quasi quisquam iste possimus nisi libero vero ab perspiciatis!</p>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio expedita iste voluptates unde veniam quae illo eius maiores debitis quasi! Sunt quasi quisquam iste possimus nisi libero vero ab perspiciatis!</p>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio expedita iste voluptates unde veniam quae illo eius maiores debitis quasi! Sunt quasi quisquam iste possimus nisi libero vero ab perspiciatis!</p>
    </div>

<div class="pictures-wrapper">
    <div class="pictures-wrapper__i">

        <img src="http://d1kpauj42bqh9t.cloudfront.net/media/catalog/product/cache/2/image/9df78eab33525d08d6e5fb8d27136e95/i/p/iphone5black.jpg" alt="" class="a" />
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT-sb3Lf02r3IBuRl5ohXblfqEWhA5RgRob9i3GgZaYig0G7dl0" alt="" class="b" />
        
    </div>
</div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    position: relative;
}

.pictures-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
    .pictures-wrapper__i {
        position: relative;
        margin: auto;
        height: 100%;
        width: 100%;
    }

        .a, .b {
            position: absolute;
            width: 200px;
            display: block;
        }
        .a {
            right: 50%;
            margin-right: 200px;
            bottom: 100px;
        }
        .b {
            left: 50%;
            margin-left: 200px;
            bottom: 150px;
        }