JSFiddle - React, Tailwind, and code Playground

by PeeHaa

HTML

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

<header>
  <h1>Something</h1>
  <p>Some intro</p>
</header>
<div id="body">
    <article>
        <h1>Some title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in urna sodales nulla fringilla ultrices at vehicula erat. Curabitur sit amet augue at velit ornare vehicula. Sed diam mi, ornare commodo congue at, aliquet sed eros. Cras nec metus massa, eget placerat ligula. Cras vel orci quis ante suscipit ultricies ac vel urna. Praesent ultricies purus ut leo dignissim at lobortis leo tempus. Etiam eu turpis nulla. Donec vitae odio in metus suscipit pulvinar. Aliquam non porttitor nulla.</p>
        <pre>
<code>&lt;?php
$someVariable = 'This is just a test!';

echo $someVariable;</code>
        </pre>
        <footer>
            <ul>
                <li>11-07-2012</li>
                <li>15:30</li>
                <li>Comments 31</li>
            </ul>
        </footer>
    </article>
    <article>
        <h1>Some title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in urna sodales nulla fringilla ultrices at vehicula erat. Curabitur sit amet augue at velit ornare vehicula. Sed diam mi, ornare commodo congue at, aliquet sed eros. Cras nec metus massa, eget placerat ligula. Cras vel orci quis ante suscipit ultricies ac vel urna. Praesent ultricies purus ut leo dignissim at lobortis leo tempus. Etiam eu turpis nulla. Donec vitae odio in metus suscipit pulvinar. Aliquam non porttitor nulla.</p>
        <footer>
            <ul>
                <li>11-07-2012</li>
                <li>15:30</li>
                <li>Comments 31</li>
            </ul>
        </footer>
    </article>    
</div>
<footer>
</footer>

CSS

body { background: #eeeeee; font-family:  'Droid Sans';}
header { background: #2d393b; height: 65px; color: white; padding: 5px; }
header h1 { font-weight: bold; font-size: 24px; margin-top: 5px; }
header p {  font-size: 10px; margin-top: 5px; }
#body { padding: 10px; }
article { margin-bottom: 25px; }
article h1 { font-size: 24px; }
article pre { background: white; border-radius: 5px; border: 1px solid #2d393b; padding: 5px; margin: 10px 0; }
article footer ul { margin: 0; padding: 0; }
article footer li { margin: 0; display: inline; padding: 0 10px; font-size: 12px; list-style: none; }