JSFiddle - React, Tailwind, and code Playground

by jfrej

HTML

<div class="content">
    <div class="left-background"></div>
    <div class="right-background"></div>
    content
</div>

CSS

body {
    color: #dddddd;
    overflow-x: hidden;
}
@media (max-width: 400px) {
    body {
        overflow-x: visible;
    }
    .left-background, .right-background {
        display: none;
    }
}
.content, .left-background, .right-background {
    background-image: url(http://flickholdr.com/400/300/sea,sun/bw);
    height: 200px;
    width: 400px;
}
.left-background, .right-background {
    -moz-transform:    scaleX(-1);
    -o-transform:      scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform:         scaleX(-1);
    filter:            FlipH;
    -ms-filter:        "FlipH";
}
.left-background, .right-background {
    position: absolute;
}
.left-background {
    left: -400px;
}
.right-background {
    right: -400px;
}
.content {
    margin: 0 auto;
    position: relative;
}