JSFiddle - React, Tailwind, and code Playground

Responsive CSS Weblog Layout

by Jennifer Perrin

HTML

<nav>
    <a href="#">Weblog</a>
</nav>

<h1 data-title="Heading Level One">Heading Level One</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut adipiscing gravida orci, sit amet mattis orci vestibulum in. Donec posuere lacinia neque vitae bibendum. Ut ut libero sed massa pharetra placerat a id mauris. Morbi mollis, risus ac tempus ultricies, libero nisl ultrices neque, a semper sem velit vitae dolor. Aliquam erat volutpat <span class="amp">&amp;</span> this is a <a href="#">test link</a>. Nam faucibus massa a nisi porta vitae volutpat odio rhoncus. Pellentesque non ante nec turpis aliquet porttitor ac id turpis. Sed eleifend mauris eu nisi sagittis mattis interdum eros gravida. Cras at odio urna, et faucibus nibh. Ut vitae placerat nibh. Cras pharetra neque quis sapien iaculis consequat.</p>

<p>Proin ipsum neque, pretium sit amet mattis at, ultricies sed felis. Vivamus at neque non ipsum aliquet molestie non id velit. Nullam accumsan condimentum urna eu consequat. Nunc feugiat urna ac odio sodales nec elementum sapien condimentum. Maecenas ac nulla et tortor egestas cursus vel id lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc eu nunc ipsum, vel ullamcorper metus.</p>

<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>

<p>Phasellus iaculis dapibus metus, vitae lacinia augue porta vel. Mauris quis ligula sed orci ullamcorper lacinia id in neque. Aliquam pretium mattis adipiscing. Nullam pretium egestas mauris lacinia bibendum. Suspendisse id mauris dui, non venenatis dui. Sed condimentum, justo nec lobortis auctor, urna erat mattis felis, nec malesuada libero libero eget tellus. Aenean tellus magna, posuere sit amet viverra auctor, hendrerit ac turpis. Nunc eget tellus magna, et suscipit nunc. Suspendisse non nulla felis. Vestibulum dapibus elementum venenatis. Duis semper purus eget dolor adipiscing nec bibendum risus tincidunt. Morbi faucibus porttitor...

CSS

html {
    background-color: #eee;
    background-image: -webkit-linear-gradient(right bottom,
                      transparent 0%, transparent 25%,
                      hsla(0,0%,0%,.05) 25%, hsla(0,0%,0%,.05) 50%,
                      transparent 50%, transparent 75%,
                      hsla(0,0%,0%,.05) 75%, hsla(0,0%,0%,.05) 100%);
    background-image: -moz-linear-gradient(right bottom,
                      transparent 0%, transparent 25%,
                      hsla(0,0%,0%,.05) 25%, hsla(0,0%,0%,.05) 50%,
                      transparent 50%, transparent 75%,
                      hsla(0,0%,0%,.05) 75%, hsla(0,0%,0%,.05) 100%);
    background-image: -ms-linear-gradient(right bottom,
                      transparent 0%, transparent 25%,
                      hsla(0,0%,0%,.05) 25%, hsla(0,0%,0%,.05) 50%,
                      transparent 50%, transparent 75%,
                      hsla(0,0%,0%,.05) 75%, hsla(0,0%,0%,.05) 100%);
    background-image: -o-linear-gradient(right bottom,
                      transparent 0%, transparent 25%,
                      hsla(0,0%,0%,.05) 25%, hsla(0,0%,0%,.05) 50%,
                      transparent 50%, transparent 75%,
                      hsla(0,0%,0%,.05) 75%, hsla(0,0%,0%,.05) 100%);
    background-image: linear-gradient(right bottom,
                      transparent 0%, transparent 25%,
                      hsla(0,0%,0%,.05) 25%, hsla(0,0%,0%,.05) 50%,
                      transparent 50%, transparent 75%,
                      hsla(0,0%,0%,.05) 75%, hsla(0,0%,0%,.05) 100%);
    background-size: 25px 25px;
}
body {
    background: #fff;
    border: 1px solid #bbb;
    margin: 50px auto;
    max-width: 900px;
    padding: 75px 10% 125px 10%;
    position: relative;
    width: 70%;
    -webkit-border-radius: 20px 0 0 20px / 7px 0 0 7px;
       -moz-border-radius: 20px 0 0 20px / 7px 0 0 7px;
            border-radius: 20px 0 0 20px / 7px 0 0 7px;
    -webkit-box-shadow: inset 25px 0 35px -20px...