JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="card">
    <div class="content">
        <h2><a href="http://demo.thethemefoundry.com/shelf-theme/?p=84">End of year lists</a></h2>
        <h4>
            <span>September 21, 2010 </span>
        </h4>
        <p>
            First a list of things to be happy about:
        </p>
        <ul>
            <li>Christopher Nolan</li>
            <li>Zooey Deschanel</li>
            <li>Star Wars</li>
            <li>Ridley Scott</li>
            <li>The Beatles</li>
            <li>Bobble Hats. Yes it’s a slightly controversial inclusion, but I needed to test lists with multiple lines per item.</li>
        </ul>
        <p>
            Then a list, in order of priority of all the top 5 films of 2010:
        </p>
        <ol>
            <li>Inception</li>
            <li>Scott Pilgrim vs The World</li>
            <li>Harry Potter and the Deathly Hallows Part 1</li>
            <li>Toy Story 3</li>
            <li>Where the Wild things are (OK that was 2009, but…)</li>
        </ol>
        <p>
            Here’s the code to make it happen:
        </p>
        <pre>
            <code>&lt;script src="/js/code.js" /&gt; &lt;script src="/js/anotherbigscript.js" /&gt;</code>
        </pre>
    </div>
</div>

CSS

.card ul, .card ol {
    margin: 0 0 1em 0.5em;
    padding: 0.5em 0 0.5em 22px;
    border-top: 1px solid #EAEAEA;
    border-bottom: 1px solid #EAEAEA;
    background: url(../images/rule.png) repeat-y 0 0;
}

.card li {
    padding: 0 0 0 14px;
    margin: 0.175em 0;
}

.card ul li{
    list-style-type: circle;
}

.card img {
    max-width: 100%;
}

code {
    background: #fef241;
    font-family: Inconsolata,Consolas,monospace;
    padding: 0.25em;
    font-size: 14px;
    line-height: 1.4;
}

/* Shift positions slightly to be less uniform */

.card {
    position: absolute;
    left: 0;
    max-height: 100%;
    right: 18px;
    bottom: 34px;
    background-color: #fff;
    background-image: url(../images/cardgrad.png);
    background-position: left bottom;
    background-repeat: no-repeat;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4), 12px -1px 15px rgba(0,0,0,0.1);
    -o-box-shadow: 0 1px 2px rgba(0,0,0,0.4), 12px -1px 15px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.4), 12px -1px 15px rgba(0,0,0,0.1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.4), 12px -1px 15px rgba(0,0,0,0.1);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    overflow: auto;
    margin: 0 0 0 -2px;
    padding: 14px;
}