JSFiddle - React, Tailwind, and code Playground

by Blake Plumb

HTML

<div>
    <h1>What a fish!</h1>
    <p>This is my pages content!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus, lacus suscipit suscipit cursus, neque orci lacinia ligula, vitae finibus eros erat eu elit. Quisque elementum accumsan dui, ut bibendum leo lacinia et. Praesent rhoncus sapien eu est aliquet aliquam. Praesent in lorem ut eros pharetra pulvinar ac quis lectus. Duis varius, odio vitae aliquam viverra, quam dui volutpat sapien, eu venenatis neque quam eget tellus. Donec hendrerit, justo sed congue vestibulum, tortor velit malesuada ex, a condimentum leo est blandit metus. In id dapibus sapien. Nunc non urna a mi fringilla dignissim. Curabitur at sapien rutrum, facilisis ex non, dictum turpis. In maximus augue neque, nec pretium sem dapibus at. Quisque nisl arcu, vulputate non quam eu, venenatis pellentesque dolor.</p>

    <p>Nunc non diam diam. Donec nec aliquet eros. Ut iaculis risus quis viverra facilisis. Curabitur lobortis eros ut erat vestibulum laoreet. Mauris quis sapien efficitur, varius augue in, ullamcorper justo. Maecenas maximus imperdiet tellus, ut tristique eros sagittis id. Fusce et diam ac ex laoreet ultricies. Vestibulum eget iaculis magna. Sed sapien augue, mattis sollicitudin nulla efficitur, euismod facilisis massa.</p>

    <p>Nullam sodales gravida eros, ac fermentum magna aliquam in. Curabitur vehicula luctus metus, at faucibus sapien efficitur sit amet. Maecenas suscipit est sit amet quam euismod lobortis. Cras elit nisl, commodo at tellus sit amet, mollis luctus urna. Proin tempus leo tortor, non ultricies nunc malesuada eget. Suspendisse eu imperdiet dui. Aenean blandit quis ante ac rhoncus. Sed eleifend at nisl eu facilisis. Morbi augue leo, semper eu congue ut, fringilla in turpis. Nullam in fermentum turpis, nec accumsan ex. Phasellus vestibulum magna ut est varius, vel lobortis purus vulputate. Curabitur nec dapibus elit. Vivamus faucibus nunc tristique lacinia eleifend. Cras non faucibus...

CSS

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #000;
    overflow: hidden;
} 

body {
    max-width: 3264px; /* width of image */
    margin: 0 auto;
    background-image: url('https://dl.dropboxusercontent.com/u/59918876/fish.jpg');
    background-position: center center;
    background-size: cover; /* or contain based on the effect you want */
    background-repeat: no-repeat;
}

div {
    margin: 0 auto;
    width: 500px;
    max-width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    padding: 20px;
    overflow: auto;
    box-sizing: border-box;
}

h1 {
    margin: 0;   
}