JSFiddle - React, Tailwind, and code Playground

by adamh

HTML

<div class="container" id="site-title">
    <a href="#">
        AdamHopkinson<span>.co.uk</span>
    </a>
</div>
<div class="container">
    <div id="header">
        <div id="base"></div>
        <div id="overlay"></div>
        <h1>Header</h1>
    </div>
    <div id="page">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nulla nisi, faucibus quis accumsan at, fermentum at libero. Vivamus nec nulla risus. Aenean eget ipsum dolor. Donec luctus sagittis quam nec varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget lorem in tellus adipiscing cursus vel sit amet urna. Ut vel nisl massa. Sed elementum sem quis lectus semper vestibulum.</p>
        <h2>Heading 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nulla nisi, faucibus quis accumsan at, fermentum at libero. Vivamus nec nulla risus. Aenean eget ipsum dolor. Donec luctus sagittis quam nec varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget lorem in tellus adipiscing cursus vel sit amet urna. Ut vel nisl massa. Sed elementum sem quis lectus semper vestibulum.</p>
        <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nulla nisi, faucibus quis accumsan at, fermentum at libero. Vivamus nec nulla risus. Aenean eget ipsum dolor.</p>
            <p>Donec luctus sagittis quam nec varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget lorem in tellus adipiscing cursus vel sit amet urna. Ut vel nisl massa. Sed elementum sem quis lectus semper vestibulum.</p>
        </blockquote>
        <h3>Heading 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nulla nisi, faucibus quis accumsan at, fermentum at libero. Vivamus nec nulla risus. Aenean eget ipsum dolor.</p>
        <div class="meta">
            Posted on 26th October 2012
        </div>
    </div>
</div>

CSS

body {
    text-align: center;
    padding: 20px;
    background-color: #2A044A;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.4em;
}

.container {
    margin: 0 auto;
    width: 640px;
    text-align: left;
}

.container:nth-child(2) {
    outline: 4px solid rgba(255,255,255,0.1);
}

#site-title {
    padding-bottom: 10px;
}

#site-title a {
    display: block;
    margin-left: 20px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: #eee;
    line-height: 1em;
    text-decoration: none;
}

#site-title a span {
    display: none;
    color: #666;
}

#site-title a:hover span {
    display: inline-block;
}

#header {
    position: relative;
    height: 427px;
}

#base, #overlay {
    position: absolute;
    background: url('http://farm4.staticflickr.com/3612/5811212522_4c27ce18be_z.jpg') center center no-repeat;
}

#header h1 {
    position: absolute;
    bottom: 160px;
    left: 20px;
    font-size: 36px;
    font-weight: bold;
    color: white;
    z-index: 30;
    text-shadow: 0 0 4px black;
    letter-spacing: -1px;
    margin: 0;
}

#base {
    width: 640px;
    height: 427px;
    z-index: 10;
    -webkit-filter: contrast(200%);
}

#overlay {
    left: 1px;
    top: 1px;
    width: 638px;
    height: 425px;
    z-index: 20;
}

#page {
    border-top: 2px solid #ddd;
    background: white;
    padding: 38px 40px 40px 40px;
    color: #333;
}

h1, h2, h3, h4, h5 {
    font-weight: bold;
    margin: 1em 0;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 18px;
}

p {
    margin: 1em 0;
}

blockquote {
    background: #eee;
    padding: 1em;
}

blockquote p:first-child {
    margin-top: 0;
}

blockquote p:last-child {
    margin-bottom: 0;
}

.meta {
    font-size: 10px;
    text-transform: uppercase;
    color: #484848;
}