JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outerWrapper">
    <div id="header">
        <div id="logo">
            <img src="images/sportlogo1Final.png" alt="logo" />
        </div>
        <div id="companyName">
            <p>XXXXXXXXXX XXXXXXX</p>
        </div>
        <div id="tag">
            <p>Eliminating debt and rebuilding lives...one client at a time.</p>
        </div>
        <div id="phone">
            <p>xxx-xxx-xxxx</p>
        </div>
    </div>
    <div id="topNav">
        <ul>
            <li><a href="index.html">HOME</a>
            </li>
            <li><a href="about.html">ABOUT US</a>
            </li>
            <li><a href="services.html">SERVICES</a>
            </li>
            <li><a href="faq.html">FAQ</a>
            </li>
            <li><a href="contact.html">CONTACT US</a>
            </li>
        </ul>
    </div>
    <div id="contentWrapper">
        <div id="content">
            	<h1>Debt Solutions that Work!</h1>

            <img class="imgStyle1" src="images/DebtBurden-1.jpg" alt="woman with many debts" /><span>Stressed over your debt situation?</span>

            <p>You are not alone.</p>
            <p>Debt is the biggest problem facing Canadians today.</p>
            <p>The average Canadian has over $25,000 in debt outside their mortgage and this amount is growing every year.</p>
            <p>Claims for debt solutions are rampant, but so many are littered with gimmicks and misleading information that true debt relief is rarely achieved.</p>
            <p>Credit counsellors, collection agencies, and trustees are all paid by your creditors forcing the question: who or what is their real priority?</p>
            <p>The fact is, the average person facing debt problems is left to fend for themselves. And as the deck is stacked against them, temporary relief from debt is often the best they can achieve.</p>
            <p>XXX is here to level the playing field.</p>
            	<h2>What is Debt Consulting?</h2>

            <p>Debt consultants work...

CSS

/* RESET http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126 License: none (public domain) */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border-style: none;
    border-color: inherit;
    border-width: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}
/* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* LAYOUT OF TORONTO CREDIT SERVICES DRAFT 1 */
 body {
    background-image:url('../images/groovepaper-bluetint.png');
}
#outerWrapper {
    width:960px;
    margin:0px auto;
    background-image:url('../images/groovepaper.png');
    border:7px #1a5278 solid;
    overflow:visible;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-size:14px;
    color:black;
}
a:link {
    color:#0000FF
}
a:visited {
    color:#6699FF
}
a:hover {
    color:#3333FF
}
a:active {
    color:#CC0000
}
a:focus {
    color:#3333FF
}
h1 {
    font-size:30px;
    color:#1A5278;
    font-weight:bold
}
h2 {
    font-size:18px;
    color:#1A5278;
    font-weight:bold
}
h3 {
    font-size:16px;
    color:#1A5278;
    font-weight:bold
}
.bigger {
    font-size:18px;
   ...