JSFiddle - React, Tailwind, and code Playground

by spedwards

HTML

<div id="centre">
    <div id="pagewrapper">
        <header>
            <hgroup>
                <h1>Heading</h1>
                <h2>Sub-Heading</h2>
            </hgroup>
        </header>
        
        <div id="leftContent">
            <nav>
                <ul>
                    <li>Home</li>
                    <li>Page 1</li>
                    <li>Page 2</li>
                    <li>Page 3</li>
                </ul>
            </nav>
        </div>
        
        <div id="mainContent">
            <article>
                <h3>Heading</h3>
                <p>Nullam eu neque vel lectus volutpat posuere. Sed mollis consectetur ligula. Morbi blandit tincidunt gravida. Vestibulum venenatis, quam ac dapibus dictum, urna nisi scelerisque risus, eget suscipit mi sem in eros. Quisque nulla odio, suscipit a sollicitudin ac, consectetur eget elit. Ut bibendum volutpat ante sed rutrum. Sed dapibus eu tortor pharetra commodo.</p>
            </article>
        </div>
    </div>
</div>

CSS

body {
    background:url(http://thepatternlibrary.com/img/i.jpg);
    height:100%;
}

h1,h2,h3,h4,h5,h6 {
    margin:0;
    padding:0;
}

#centre {
    width:960px;
    margin:0 auto 35px auto;
}

#pagewrapper {
    color:#0b0312;
    background-color:#ffffff;
    width:960px;
    margin:0 10px;
    position:relative;
}

header {
    height:200px;
    margin-bottom:10px;
    background:url(http://thepatternlibrary.com/img/i.jpg);
    background-position-x:78px;
    width:100%;
    line-height:5em;
    text-align:center;
    color:#ffffff;
    font-weight:800;
    font-size:x-large;
    margin:0 auto;
}

h1 {
    color:#f2b28d;
    padding-left:310px;
    text-shadow:2px 2px 0 #0d0d0d;
    position:relative;
    left:48px;
}

h2 {
    color:#594349;
    padding-left:310px;
    padding-top:1px;
    -webkit-text-stroke:.5px #000000;
    position:relative;
    bottom:85px;
}