JSFiddle - React, Tailwind, and code Playground

by akang2

HTML

<html>
<body>
    <header>
    <img src="https://edit.fogbugz.com/default.asp?pg=pgDownload&pgType=pgFile&ixBugEvent=1334&ixAttachment=95&sTicket=&sFileName=mont-logo.png" />
        <h1>Small Business Innovation (SBI)</h1>
        <p>Grant #228410</p>
    </header>
    <section>
        <article class="graph">
            <img src="http://lorempixel.com/output/animals-q-g-400-400-7.jpg" />
            <img src="http://lorempixel.com/output/animals-q-g-400-400-9.jpg">
        </article>
        <article>
            <h2>Program Description</h2>
            <p> Hey there fancy face. Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.
            </p>
            <p> Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
            <p> Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
        </article>
    </section>
    <footer>Copyright Edit LLC of Fresno, CA 93721 | English mother fucker! Do you speak it?! Then you understand what I'm saying.
    </footer>
</body>
</html>

CSS

body {
    font-family: helvetica,arial,sans-serif;
    max-width: 970px;
    margin: 0px auto;
}

header {
    height: 240px;
    background: url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/light_noise_diagonal.png') repeat;
}

header img {
    padding: 28px 10px 28px 35px;
}

header h1 {
    display: inline;
    /*line-height: 200px;*/
    font-size: 40px;
    vertical-align: 110px;
    /*margin-bottom: 200px;*/
}

header p {
    position: absolute;
    top: 140px;
    left: 236px;
}

h2 {
    font-size: 20px;
    padding: 10px 0px;
}

section {
    margin: 0px auto;
}

article.graph {
    text-align: center;
}

footer {
    text-align: center;
    border-top: 1px solid #999;
    padding-top: 15px;
    margin-top: 20px;
    font-size: 12px;
}

JavaScript

//montagable preview page