JSFiddle - React, Tailwind, and code Playground

by ruisoftware

HTML

<div>
    <span></span>
    <span></span>
    <span>
        Dear Tenant(s) & Landlord(s)<br />
        I've created a document that will improve 'rental universe.'
    </span>
<article>
        <header>Renter's Bill Of Rights</header>
<ol>
    <li>Bring your paperwork.
        <p>
            Every tenant should be prepared to earn trust from a prospective landlord by being prepared. To get a competitive edge over other 
applicants, person should bring the following: a completed rental application; written references from landlords, employers, and colleagues; 
a current copy of your credit report and copies of valid identifications.
You can order your credit report by mail, phone, or online directly from the websites of the major national credit bureaus.
        </p>
    </li>

    <li>Review the lease.
        <p>Tenant should carefully review all of the conditions of the tenancy before you sign and date the agreement. Your lease or rental agreement 
may contain a provision that you find unacceptable -- for example, restrictions on guests, pets, design alterations, or running a home 
business etc.
        </p>
    </li>

    <li>Get everything in writing.
        <p>
To avoid disputes or misunderstandings with landlord, get everything in writing. Keep copies of any correspondence and follow up an oral 
agreement with a letter, setting out your understandings. For example, if tenant asks landlord to make repairs, tenant should put h/his 
request in writing and keep a copy for himself. If the landlord agrees orally, send a letter confirming this.
        </p>
    </li>

    <li>Protect your privacy rights.
        <p>Next to disputes over rent or security deposits, one of the most common and emotion-filled misunderstandings arises over the tension 
between a landlord's right to enter a rental unit and a tenant's right to be left alone. If person understands privacy rights (for example, the 
amount of notice landlord must provide before entering), it will be...

CSS

@font-face {
  font-family: 'Italianno';
  font-style: normal;
  font-weight: 400;
  src: local('Italianno'), local('Italianno-Regular'), url(http://themes.googleusercontent.com/static/fonts/italianno/v3/RzzA8gdr3WCK_nxdg53KGrO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 400;
  src: local('Tangerine'), url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 700;
  src: local('Tangerine Bold'), local('Tangerine-Bold'), url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/UkFsr-RwJB_d2l9fIWsx3qRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

body {
    background-color: white;
}

article  li {
    font-weight: bold;
    font-size: 32pt;
}

article  p {
    margin-top: 0;
    font-weight: normal;
}

article header {
    font-family: 'Tangerine', cursive;
    font-weight: 700;
    font-size: 72pt;
    text-align: center;
    padding-top: 140px;
}

article,
span {
    font-family: 'Italianno', cursive;
    font-weight: 400;
    font-size: 26pt;
    text-shadow: 1px 1px hsla(0,100%,8%,.5);
    color: hsla(0,100%,10%,.5);
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
    min-width: 600px;
}

span {
    text-shadow: none;
    color: black;
    font-size: 20pt;
}

article p {
    text-shadow: none;
}

span,
article {
    box-shadow: 0 0 8px rgba(0,0,0,1);
    border-radius: 2px;
    background:...