JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

<div class="wrapper1">
    <div class="wrapper1-content">
        some content here
    </div>
</div>

<div class="wrapper1 another">
    <div class="wrapper1-content">
        some content here
    </div>
</div>

CSS

body {
    margin: 0;
}

.wrapper1 {
    position: relative;
    height: 300px;
    width: 100%;
    background: url('http://placekitten.com/g/700/300') no-repeat;
    background-position: center top;
}

.wrapper1.another {
        background-image: url('http://placekitten.com/g/720/300');
}

.wrapper1-content {
    position: relative;
    top: 30px;
    width: 300px;
    height: 40px;
    background-color: #ff0;
    margin: 0 auto;
}