Typography

    <p className="h1">Heading 1</p>
    <p className="h2">Heading 2</p>
    <p className="h3">Heading 3</p>
    <p className="h4">Heading 4</p>
    <p className="h5">Heading 5</p>
        
    <div className="border-none rounded-md bg-green-50 px-5 py-5">
       <p className="h1">Heading 1</p>
       <p className="p">class for heading 1</p>
       <p>.h1</p>
    </div>
    <div className="pt-5 xl:pl-5 pr-3">
            <div className="border-none rounded-md bg-green-50 px-5 py-5">
                <p className="h2">Heading 2</p>
                <p className="p">class for heading 2</p>
                <p>.h2</p>
            </div>
        </div>
        <div className="pt-5 xl:pl-5 pr-3">
            <div className="border-none rounded-md bg-green-50 px-5 py-5">
                <p className="h3">Heading 3</p>
                <p className="p">class for heading 3</p>
                <p>.h3</p>
            </div>
        </div>
        <div className="pt-5 xl:pl-5 pr-3">
            <div className="border-none rounded-md bg-green-50 px-5 py-5">
                <p className="h4">Heading 4</p>
                <p className="p">class for heading 4</p>
                <p>.h4</p>
            </div>
        </div>
        <div className="pt-5 pr-3 xl:pl-5">
            <div className="border-none rounded-md bg-green-50 px-5 py-5">
                <p className="h5">Heading 5</p>
                <p className="p">class for heading 5</p>
                <p>.h5</p>
            </div>
        </div>