JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<div id="container">
    <div id="header">Hi!</div>

    <div class="sidebar">I am the sidebar.</div>

    <div id="content">Lorem ipsum dolor.</div>

    <div id="footer">You have reached the footer.</div>
</div>

CSS

body {
    background-image: url( http://placehold.it/200x200 );
    background-position: 0 100px;
    background-repeat: repeat-x;
}

#container {
    background-image:
        url( http://placekitten.com/500/100 ),
        url( http://placekitten.com/100/100 );
    background-repeat:
        no-repeat,
        repeat;
    border: 10px solid red;
    display: block;
    height: 1000px;
    margin: 0 auto;
    padding-top: 100px;
    width: 500px;
}

#header {
    background-color: yellow;
    border: 5px solid green;
    margin: 10px;
    padding: 10px;
    xwidth: 50%;
}

.sidebar {
    border: 5px solid orange;
}

#content {
    border: 5px solid yellow;
}

#footer {
    border: 5px solid purple;
}