JSFiddle - React, Tailwind, and code Playground

by Alexander Startsev

HTML

<div class="bg-block">
    <img src="http://placekitten.com/1200/600" alt="" class="bg-image">
    <div class="content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores temporibus officia itaque eveniet veniam in consequatur repellat nobis deleniti perspiciatis. Perspiciatis sunt soluta quis minus animi cum porro voluptate quo.
        </p>
    </div>
</div>

CSS

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: #FFF;
    font: 400 14px/18px Helvetica, Arial, sans-serif;
    color: #333;
}

.bg-block{
    max-width: 1600px;
    padding: 40px 0;
    position: relative;
    overflow: hidden;
}

.bg-block .bg-image{
    position: absolute;
    width: 1200px;
    height: 600px;
    left: 50%;
    top: 0;
    margin-left: -600px;
}

.content{
    max-width: 400px;
    position: relative;
    margin: auto;
    background-color: #FFF;
    border: 1px #CCC solid;
    padding: 20px;
}